/*
  tokens.css — the ONLY file in this codebase allowed to contain raw hex or raw px values.
  Three tiers: primitive (raw) -> semantic (meaning) -> a small shared structural layer
  (radii, elevation, motion, z-index) that every component draws from.

  Components (components.css) reference semantic/structural tokens only — never a
  primitive directly, and never a literal hex/px. See Part II §A1 of the design system.
*/

:root {

  /* ============================================================
     PRIMITIVE — Harbor Ink (anchor: body text, dark sections)

     WARMTH PASS: the 800-950 steps were desaturated from ~62% to ~38-50%
     and rotated off pure blue (204deg -> ~196deg). The original ramp was a
     cold, highly saturated navy; measured against the built page it read
     as clinical rather than "sea at dusk" — off-white paper plus cold navy
     is the palette of a medical practice, which is exactly the reaction
     this pass was opened to fix.

     Note honestly what this does and does not do: a blue cannot be made
     warm, only less cold. This step removes the clinical edge; the actual
     warmth comes from the Sand ramp and --c-warm-100 below, which carry
     far more painted area (Sand alone is ~53% of the homepage).
     ============================================================ */
  --c-ink-950: #0A181C;
  --c-ink-900: #0E232A;
  --c-ink-800: #15282F; /* Harbor Ink */
  --c-ink-700: #223D45;
  --c-ink-600: #32484F; /* Dusk */
  --c-ink-500: #4A6675;
  --c-ink-400: #6B838F; /* input borders — 3.67:1, meets 1.4.11 non-text 3:1 */
  --c-ink-300: #94A7B0;
  --c-ink-200: #C0CCD2;
  --c-ink-100: #DFE6EA;
  --c-ink-050: #F0F4F6;

  /* PRIMITIVE — Ember (the single action color) */
  --c-ember-900: #6E2E1B;
  --c-ember-800: #8B3A22;
  --c-ember-700: #A9482A; /* Ember — primary CTA, links on light */
  --c-ember-600: #C4592F; /* hover */
  --c-ember-500: #D97544;
  --c-ember-400: #E5926A; /* links on dark sections */
  --c-ember-300: #EFB596;
  --c-ember-200: #F6D6C4; /* selection highlight */
  --c-ember-100: #FBEAE0; /* focus halo */
  --c-ember-050: #FDF5F0;

  /* PRIMITIVE — Sand (warm paper neutrals)

     WARMTH PASS: the whole ramp was pushed warmer. The old Sand was
     #FAF7F2 — 3% saturation, R-B of only 8. Technically "warm paper",
     perceptually just white. Since Sand paints ~53% of the homepage,
     that near-neutral was the single largest contributor to the site
     reading sterile. R-B is now 13 on Sand and 24 on Shell: still
     unmistakably paper, but paper with sun on it rather than copier
     stock. Every pairing re-verified — see the table in §A1. */
  --c-sand-050: #FEFBF7; /* inputs, raised cards */
  --c-sand-100: #FAF5ED; /* page background */
  --c-sand-200: #F0E6D8; /* Shell — alternating sections */
  --c-sand-300: #E5D6C2; /* card hover */
  --c-sand-400: #DFD2C0; /* Line — decorative hairlines ONLY, 1.37:1, never an input border */
  --c-sand-500: #C9BCA9;

  /* PRIMITIVE — Warm band. The third section background, added in the
     warmth pass. Sand and Shell are both neutral-warm papers a single
     step apart, so alternating them produced almost no felt rhythm —
     measured, the homepage ran 1,784px (two full viewport heights) of
     near-identical background with no imagery to break it.

     This is an ember-tinted paper (hue 23, sitting in the same family as
     Ember's 16) rather than a fourth neutral, so it reads as brand
     colour on a whole band instead of another shade of off-white.
     Deliberately soft: Ember still clears AA on it (4.67:1). */
  --c-warm-100: #F7E4D8;

  /* PRIMITIVE — accents. Decoration/marks only — see contrast notes below. */
  --c-seaglass-700: #4F7266; /* success text on light — passes AA */
  --c-seaglass-500: #7FA99B; /* icons/marks. 2.40:1 on Sand — NEVER text on light */
  --c-seaglass-100: #E3EDE9;
  --c-sun-600: #B0812C; /* warning text */
  --c-sun-500: #D9A441; /* rating stars, small marks. 2.07:1 on Sand — NEVER text */
  --c-signal-700: #96291F; /* error text — 7.35:1 on Sand, AAA (darkened a step to
                              hold AAA against the warmed Sand above) */
  --c-signal-100: #FBE9E6;

  /* ============================================================
     SEMANTIC — light (default) values
     ============================================================ */
  --color-bg: var(--c-sand-100);
  --color-bg-alt: var(--c-sand-200);
  --color-bg-warm: var(--c-warm-100); /* third band — see --c-warm-100 */
  --color-surface: var(--c-sand-050);
  --color-text: var(--c-ink-800);
  --color-text-secondary: var(--c-ink-600);
  --color-text-tertiary: var(--c-ink-500);
  --color-action: var(--c-ember-700);
  --color-action-hover: var(--c-ember-600);
  --color-action-active: var(--c-ember-900);
  --color-action-text: #FFFFFF;
  --color-border-decorative: var(--c-sand-400);
  --color-border-interactive: var(--c-ink-400);
  --color-border-interactive-hover: var(--c-ink-600);
  --color-focus: var(--c-ember-700);
  --color-focus-on-action: var(--c-ink-900); /* double-ring: an Ember ring on Ember is invisible */
  --color-selection: var(--c-ember-200);
  --color-error-text: var(--c-signal-700);
  --color-error-surface: var(--c-signal-100);
  --color-success-text: var(--c-seaglass-700);

  /* ============================================================
     TYPOGRAPHY — families, fluid scale, weights
     ============================================================ */
  /* "* Fallback" are synthetic, metric-matched local faces defined in base.css —
     they close the size gap between the web font and the OS fallback so the
     font-display:swap moment produces zero layout shift. See base.css §fonts. */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --t-xs:   clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
  --t-sm:   clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --t-base: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --t-md:   clamp(1.125rem, 1.07rem + 0.26vw, 1.25rem);
  --t-lg:   clamp(1.3125rem, 1.23rem + 0.39vw, 1.5rem);
  --t-xl:   clamp(1.625rem, 1.46rem + 0.78vw, 2rem);
  --t-2xl:  clamp(2rem, 1.65rem + 1.56vw, 2.75rem);
  --t-3xl:  clamp(2.5rem, 1.93rem + 2.60vw, 3.75rem);
  --t-4xl:  clamp(3rem, 2rem + 4.70vw, 5.25rem);

  /* ============================================================
     SPACING — 4px base unit, spacious progression
     ============================================================ */
  --space-1: 0.25rem;  /* 4  — icon-to-text */
  --space-2: 0.5rem;   /* 8  — label-to-field */
  --space-3: 0.75rem;  /* 12 — tight internal */
  --space-4: 1rem;     /* 16 — default internal */
  --space-5: 1.5rem;   /* 24 — card padding, field gap */
  --space-6: 2rem;     /* 32 — card padding (large) */
  --space-7: 3rem;     /* 48 — content block gap */
  --space-8: 4rem;     /* 64 — section padding, mobile */
  --space-9: 6rem;     /* 96 — section padding, tablet */
  --space-10: 8rem;    /* 128 — section padding, desktop */
  --space-11: 10rem;   /* 160 — hero padding, desktop */

  /* ============================================================
     CONTAINERS
     ============================================================ */
  --container-prose: 68ch;
  --container-content: 1240px;
  --container-wide: 1440px;

  /* Breakpoints — informational; @media requires literal px (custom props
     don't resolve inside media queries). Kept in sync manually with base.css. */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ============================================================
     RADII — 2px inputs/buttons, 4px cards, 0 on images (never round)
     ============================================================ */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-none: 0;

  /* ============================================================
     ELEVATION — two levels only. No shadow on cards, ever.
     ============================================================ */
  --border-hairline: 1px solid var(--color-border-decorative);
  --shadow-overlay: 0 12px 32px -8px rgba(10, 24, 28, 0.18);

  /* Header is a fixed, constant-height bar (§components.css .site-header —
     condense is a color transition only, never a size change). Named here
     since several other components (page-content top padding, the
     secondary sticky sidebar's offset) have to line up with it exactly. */
  --header-height: 80px;

  /* ============================================================
     Z-INDEX — named scale
     ============================================================ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky-cta: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-skip-link: 9999;

  /* ============================================================
     MOTION — durations and easing. Nothing exceeds 900ms.
     ============================================================ */
  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-reveal: 500ms;
  --dur-settle: 900ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* PAPER GRAIN — one inline feTurbulence as a data: URI. Stays within the
     CSP (img-src 'self' data:) and costs zero requests. The opacity is baked
     into the SVG rect rather than applied in CSS, because it is layered as a
     background-image (see base.css) and background layers cannot take their
     own opacity. Dial the rect's opacity value to taste: 0.02 is barely
     there, 0.06 starts to be visible as texture. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");

  /* Focus ring geometry */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/*
  Dark-section scope. Applied via [data-section="dark"] on a <section>.
  Not a media-query dark mode (see §A1 — full dark mode is deliberately out
  of MVP scope) — this re-points the semantic layer for a specific band,
  e.g. the Travel Planning and Contact CTA sections on the homepage.
*/
[data-section="dark"] {
  /* The scope must CONSUME the token it redefines, not just declare it.
     Without this line the block below re-points --color-text correctly, but
     nothing inside the dark band ever reads it: `body { color: var(--color-text) }`
     resolved to ink-800 once, at the body, and every heading inherited that
     computed value straight through the dark section. Since the band's
     background is also ink-800, plain headings rendered as ink-on-ink and
     were invisible — measured at exactly 1.00:1 across six headings on the
     homepage alone, including the closing "Let's put a date on it." that
     appears on nearly every page.

     Only elements carrying an explicit utility (.u-text-secondary,
     .u-text-on-dark) escaped it, which is why the bug survived earlier
     review passes: the sections looked populated, just missing their
     headlines. Found by measuring computed contrast rather than reading
     the cascade, which looks correct in isolation. */
  color: var(--color-text);

  --color-bg: var(--c-ink-800);
  --color-bg-alt: var(--c-ink-700);
  --color-surface: var(--c-ink-700);
  --color-text: var(--c-sand-100);
  --color-text-secondary: var(--c-ink-200);
  --color-text-tertiary: var(--c-ink-300);
  --color-action: var(--c-ember-400);
  --color-action-hover: var(--c-ember-300);
  --color-action-text: var(--c-ink-900);
  --color-border-decorative: var(--c-ink-700);
  --color-border-interactive: var(--c-ink-300);
  --color-focus: var(--c-ember-300);
  --color-selection: var(--c-ember-800);

  color-scheme: dark;
}

/* Form controls: keep browser-rendered chrome (date pickers, select lists)
   light regardless of OS theme, so it never inverts against our warm surfaces. */
input, select, textarea {
  color-scheme: light;
}