/*
  Backpacking Baristas — Color Palette
  ------------------------------------
  Single source of truth for site colors. Swap a hex value here and it
  updates everywhere the variable is used. See docs/color-palette.md
  for usage guidance and how to swap in a new palette entirely.
*/

:root {
  /* Core brand colors (client-specified) */
  --color-charcoal: #384450;    /* primary dark neutral - body text, secondary accent */
  --color-ink: #09080E;         /* darkest - nav bar, footer, strongest headings */
  --color-deep-brown: #654222;  /* primary accent - buttons, links, CTAs */

  /* Derived tones — computed from the three brand colors above so the
     whole palette stays tied to them. If you swap a brand color, regenerate
     these (lighten/darken the same source color) rather than picking new
     unrelated hex values. */
  --color-deep-brown-dark: #4E331A; /* deep-brown, darkened ~22% - CTA hover/active */
  --color-cream: #F5F3F1;           /* deep-brown, lightened ~94% - primary light background */
  --color-parchment: #EFECE8;       /* deep-brown, lightened ~90% - card / section backgrounds */
  --color-border: #D3D5D8;          /* charcoal, lightened ~78% - card borders, dividers */
  --color-text-muted-value: #55606A;/* charcoal, lightened ~15% - muted body copy */

  /* Utility */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-error: #B3261E;
  --color-success: #3C6E47;

  /* Semantic aliases (use these in components, not raw colors above) */
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-parchment);
  --color-surface: var(--color-white);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-text-muted-value);
  --color-heading: var(--color-ink);
  --color-accent: var(--color-deep-brown);
  --color-accent-hover: var(--color-deep-brown-dark);
  --color-accent-secondary: var(--color-charcoal);
  --color-nav-bg: var(--color-ink);
  --color-nav-text: var(--color-cream);

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Spacing / radius (kept here so layout + palette stay in one small set of files) */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}