/**
 * Mint design tokens — vermilion on cream.
 *
 * The brand is a wax seal: a decision pressed into the record and kept. Real
 * sealing wax is vermilion — cinnabar red, struck bright. Maroon is what wax
 * looks like after a century of oxidation, which is why the earlier oxblood
 * read as dull: it sat at nearly the same luminance as the ink, so the eye
 * never separated accent from body text.
 *
 * Ground is warm cream rather than white so the whole product reads as paper
 * stock. Cards stay pure white so they lift off it.
 *
 * Fill hierarchy:
 *   vermilion  the hero CTA and every accent — links, active nav, focus, badges
 *   ink        normal primary buttons; keeps exactly one accent action per page
 *
 * Contrast: --color-primary is 4.68:1 on white and --color-text-secondary is
 * 6.91:1 on the cream ground. Both clear WCAG AA for body text.
 *
 * Semantic colours are deliberately pushed away from the brand hue — see the
 * note above --color-danger. Every component's .module.css consumes these via
 * var(--token) and never hardcodes a hex or px.
 *
 * Mobile-first: values are tuned for small screens; the @media block near the
 * bottom scales type and spacing up on larger viewports.
 */

:root {
  /* ================= Color ================= */

  /* Canvas + surfaces */
  --color-bg: #fdf8f3;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f7efe7;
  --color-surface-hover: #f6ece3;
  --color-surface-active: #efe2d5;
  --color-overlay: rgba(26, 22, 18, 0.55);

  /* Type */
  --color-text: #1a1612;
  --color-text-secondary: #5e554c;
  --color-text-muted: #6e6459;
  --color-text-subtle: #aba093;
  --color-text-inverse: #ffffff;

  /* Lines */
  --color-border: #eaded2;
  --color-border-subtle: #f2e8de;
  --color-border-strong: #1a1612;

  /* Brand — vermilion. Accents, links, active nav, focus, the hero CTA.
     Normal primary buttons are ink (see --color-ink); vermilion as a large
     fill is reserved for the single most important action on a page. */
  --color-primary: #c94a26;
  --color-primary-hover: #b03f1f;
  --color-primary-active: #7d2c13;
  --color-primary-soft: #f9e9e0;
  --color-primary-border: #f0cdbc;
  --gradient-primary: linear-gradient(
    90deg,
    #d9542e 0%,
    #c94a26 55%,
    #b03f1f 100%
  );

  /* Seal tones — the marks in brand/logo consume these. Not for UI chrome. */
  --color-seal-rim-light: #e2734f;
  --color-seal-rim-dark: #9c3819;
  --color-seal-field: #b54322;

  /* Ink — normal primary buttons, dark surfaces, footer */
  --color-ink: #1a1612;
  --color-ink-hover: #000000;

  /* Brass — secondary accent kept for print and swag. Unused in UI chrome
     since `decision` now carries the brand colour. */
  --color-brass: #8a6d1f;
  --color-brass-soft: #faf4e4;
  --color-brass-border: #ecdcae;

  /* Semantic. Both danger and warning had to move: a vermilion brand sits in
     the orange-red band that normally belongs to error and warning states.
     Danger is now a cool crimson (hue ~353 vs the brand's ~14) and roughly
     1.6x darker, and warning is pushed yellow. Colour alone is still not
     enough separation — destructive actions must always carry an icon and an
     explicit verb. */
  --color-success: #1e7a4d;
  --color-success-soft: #e9f5ee;
  --color-success-border: #c2e2d0;

  --color-warning: #9a6410;
  --color-warning-soft: #fdf3e2;
  --color-warning-border: #f0dcb4;

  --color-danger: #a81c2e;
  --color-danger-hover: #8c1526;
  --color-danger-soft: #fbe9eb;
  --color-danger-border: #f0c6cc;

  --color-info: #1f4e79;
  --color-info-soft: #ecf2f8;
  --color-info-border: #c8daea;

  /* Memory-type accents (used on badges). `decision` carries the brand colour
     because a decision is the thing you mint. Badges use a soft ground with
     dark text, so they never read as a button. The rest are pulled well clear
     of the brand hue. */
  --color-type-decision: #c94a26;
  --color-type-decision-soft: #f9e9e0;
  --color-type-fact: #1f4e79;
  --color-type-fact-soft: #ecf2f8;
  --color-type-note: #6e6459;
  --color-type-note-soft: #f5f0ea;
  --color-type-reference: #1f6f6b;
  --color-type-reference-soft: #e9f4f3;

  /* Aliases. NavBar.module.css and ProvidersSection.module.css reference these
     names, which were never defined — the nav's active state used to paint
     with no colour at all. Pointed at the brand accent. */
  --color-accent: var(--color-primary);
  --color-accent-muted: var(--color-primary-soft);
  --color-surface-1: var(--color-surface);
  --color-surface-2: var(--color-surface-sunken);

  /* Focus ring */
  --color-focus-ring: rgba(26, 22, 18, 0.85);
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
  --shadow-focus-primary: 0 0 0 2px var(--color-bg),
    0 0 0 4px rgba(201, 74, 38, 0.5);

  /* ================= Spacing ================= */
  --space-0: 0;
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  /* Vertical rhythm between marketing sections */
  --section-y: var(--space-16);

  /* ================= Radii ================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ================= Typography ================= */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 1.75rem;   /* 28 */
  --text-4xl: 2rem;      /* 32 */
  --text-5xl: 2.5rem;    /* 40 */
  --text-hero: 2.25rem;  /* 36 — scales up on desktop */

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

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

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ================= Elevation ================= */
  /* Shadows carry the ink hue rather than pure black so cards sit on the cream
     ground without looking cut out. */
  --shadow-xs: 0 1px 2px rgba(26, 22, 18, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 22, 18, 0.08), 0 1px 2px rgba(26, 22, 18, 0.04);
  --shadow-md: 0 2px 8px rgba(26, 22, 18, 0.09);
  --shadow-lg: 0 6px 16px rgba(26, 22, 18, 0.12);
  --shadow-xl: 0 12px 32px rgba(26, 22, 18, 0.16);
  --shadow-card-hover: 0 6px 20px rgba(26, 22, 18, 0.14);

  /* ================= Motion ================= */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 130ms var(--ease-out);
  --transition-normal: 220ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* ================= Layout ================= */
  --touch-target: 44px;
  --nav-height: 68px;
  --tabbar-height: 60px;

  --width-narrow: 26rem;   /* auth card */
  --width-content: 46rem;  /* reading column */
  --width-app: 64rem;      /* app pages */
  --width-wide: 76rem;     /* marketing */

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Larger screens: scale display type + section rhythm up. */
@media (min-width: 768px) {
  :root {
    --text-hero: 3.25rem;  /* 52 */
    --text-5xl: 3rem;      /* 48 */
    --text-4xl: 2.25rem;   /* 36 */
    --text-3xl: 1.875rem;  /* 30 */
    --section-y: var(--space-24);
  }
}

@media (min-width: 1280px) {
  :root {
    --text-hero: 3.75rem;  /* 60 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
  }
}