/* Brand webfonts — Playfair Display (headings) + Montserrat (body/UI).
   Loaded in the tokens layer because the --font-head/--font-body tokens below
   name these families. Must precede all other rules per the CSS @import spec. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap");

/* ==========================================================================
   DJ Shazam — Design Tokens (Coastal Evergreen v2)
   Source of truth. Every component and every other layer (Tailwind, React)
   derives from these. Do not hardcode hex values anywhere else.
   ========================================================================== */

:root {
  /* --- Core / Structural ------------------------------------------------ */
  --c-evergreen: #0F2A24;   /* primary dark ground; text on light */
  --c-sandstone: #E7DED3;   /* primary light ground; text on dark */

  /* --- Signature accent — Coral (one ramp, two rungs) ------------------- */
  --c-coral-base: #C97A6A;  /* DARK grounds only · ~4.7:1 on evergreen */
  --c-coral-deep: #B5664F;  /* LIGHT grounds only · ~3.2:1 on sandstone (large/accent) */

  /* --- Support ---------------------------------------------------------- */
  --c-mist: #7FA6B6;        /* secondary calm; UI/eyebrow accents on dark; focus ring */
  --c-charcoal: #2B2B2B;    /* body text / UI on light */

  /* --- Semantic surfaces ------------------------------------------------ */
  --bg-dark: var(--c-evergreen);
  --bg-light: var(--c-sandstone);
  --surface: #FFFFFF;          /* cards, inputs (raised on light) */
  --surface-sunken: #DCD2C4;   /* sunken/section blocks on light */
  --surface-hover: #F1EBE1;    /* hover state for sandstone-fill buttons on dark grounds */

  /* --- Semantic text ---------------------------------------------------- */
  --text-on-dark: var(--c-sandstone);
  --text-on-light: var(--c-evergreen);
  --text-body-light: var(--c-charcoal);   /* long-form body on light */
  --text-muted: #3E4A43;   /* darkened to clear AA (4.5:1) on sandstone + sunken grounds */

  /* --- Semantic accent (surface-aware) ---------------------------------- */
  --accent-on-dark: var(--c-coral-base);
  --accent-on-light: var(--c-coral-deep);
  --link-on-dark: var(--c-coral-base);
  --link-on-light: var(--c-coral-deep);

  /* --- Interactive states ----------------------------------------------- */
  --evergreen-hover: #163A31;
  --evergreen-pressed: #0B1F1A;
  --coral-hover: #B5664F;      /* one step deeper */
  --coral-pressed: #9E563F;
  --border: rgba(15, 42, 36, 0.12);   /* evergreen @12% — hairlines on light */
  --border-strong: rgba(15, 42, 36, 0.22);
  --focus: var(--c-mist);
  --focus-width: 2px;
  --disabled-text: rgba(43, 43, 43, 0.40);  /* charcoal @40% */

  /* --- Typography ------------------------------------------------------- */
  --font-head: "Playfair Display", Georgia, serif;   /* headings only, never body */
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;

  --text-display: 3rem;       /* 48px */
  --text-h1: 2.5rem;          /* 40px */
  --text-h2: 1.875rem;        /* 30px */
  --text-h3: 1.5rem;          /* 24px */
  --text-body-lg: 1.125rem;   /* 18px */
  --text-body: 1rem;          /* 16px */
  --text-overline: 0.75rem;   /* 12px */
  --text-caption: 0.8125rem;  /* 13px */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --track-display: -0.01em;
  --track-overline: 0.2em;

  /* --- Shape — radius scale (Website Design Doc §3.1) -------------------- */
  --radius-sm: 2px;       /* chips, tags, small inputs */
  --radius-md: 4px;       /* buttons, inputs, selects — default (editorial; pairs w/ Playfair) */
  --radius-lg: 8px;       /* cards, modals, image containers */
  --radius-full: 9999px;  /* avatars only — never buttons */
  --radius: var(--radius-md);          /* back-compat default */
  --radius-pill: var(--radius-full);   /* back-compat alias (badge/pill) */

  /* --- Elevation — evergreen-tinted, never pure black (§3.4) ------------- */
  --elev-1: 0 1px 2px rgba(15, 42, 36, .06);    /* resting card, faint lift */
  --elev-2: 0 4px 16px rgba(15, 42, 36, .08);   /* hover lift */
  --elev-3: 0 12px 32px rgba(15, 42, 36, .12);  /* modals, dropdowns, popovers */

  /* --- Motion — calm settle: ease-out, no spring (§3.5/§3.7) ------------- */
  --motion-fast: 160ms;
  --motion-reveal: 500ms;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* --- Spacing ----------------------------------------------------------- */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --container-max: 1120px;
}