/* Eturnal Rest -- design tokens v2 (REAL brand, enriched system).
   The five locked brand hues are byte-identical to the live identity:
   --blue-600 #467c99 (primary), --blue-700 #38637a (deep), --blue-300 #90b0c2
   (light), --cream #f9f8f4 (page), --accent #d98c5a (warm spark). Merriweather
   + Lato. v2 enriches the SURFACE / ELEVATION / STATE ramps around those hues:
   a cool-neutral surface ladder retargets the old muddy greige --stone family,
   two-layer blue-tinted shadows give real depth, and a single --ring closes the
   focus-state gap. Calm, dignified, premium. See DESIGN-SPEC-v2.md. */
:root {
  /* ============ LOCKED BRAND BLUES (identity -- do not change the 5 locked hues) ============ */
  --blue-950: #162a35; /* deepest ink-blue, footer floor + max-contrast */
  --blue-900: #1d3744;
  --blue-800: #27505f;
  --blue-700: #38637a; /* LOCKED deep */
  --blue-600: #467c99; /* LOCKED PRIMARY brand */
  --blue-500: #5a90ac;
  --blue-400: #79a6be;
  --blue-300: #90b0c2; /* LOCKED light */
  --blue-200: #c3d6e0;
  --blue-150: #d3e0e8; /* hairline-on-blue / chip border */
  --blue-100: #dde9ef;
  --blue-50: #eef4f7;
  --blue-25: #f5f9fb; /* faintest cool wash for alternating bands */

  /* ============ WARM NEUTRALS (page identity stays warm) ============ */
  --cream: #f9f8f4; /* LOCKED page floor */
  --linen: #fcfbf8; /* warm raised card surface, sits below white */
  --sand: #f3f1ea; /* warmed + lightened */
  --paper: #fcfbf8; /* card-on-cream surface, warmer than pure white (= --linen) */

  /* ============ COOL-NEUTRAL SURFACE RAMP (the root-cause fix) ============
     Replaces the muddy greige --stone family. Faint blue undertone = "calm
     stone," not "dirty beige." Lets white/linen cards lift cleanly. */
  --surface-0: #ffffff; /* highest: popovers, map UI, hovered cards, on-band cards */
  --surface-1: var(--linen); /* default card on cream (warm lift) */
  --surface-2: #f4f6f7; /* cool band -- replaces the old muddy --stone */
  --surface-3: #eef1f3; /* deeper cool band / inset wells / rail well */

  /* legacy names retargeted to the cool ramp so every .section--stone,
     .badge--scraped, and .rail-skeleton updates at once with zero HTML edits */
  --stone: var(--surface-2);
  --stone-2: var(--surface-3);

  /* ============ BORDERS / HAIRLINES (warm vs cool, 4-step) ============ */
  --line: #e4e0d6; /* warm hairline on cream/sand surfaces */
  --line-soft: #ece7dd; /* barely-there warm divider */
  --line-cool: #dde4e8; /* cool hairline on white/blue cards */
  --line-strong: #cdd6dc; /* emphasized divider / input rest border */

  /* ============ INK / TEXT ============ */
  --ink: #1c2b33; /* body, deepened for AA on cream */
  --ink-2: #46555d; /* secondary / lede */
  --ink-3: #7a8893; /* muted / meta (AA on white at 14px+) */
  --ink-4: #a8b1b8; /* placeholder / disabled / faint meta */
  --ink-on-blue: #eaf2f6; /* body text on blue/dark bands */
  --ink-on-blue-2: #b9d0dc; /* muted text on blue/dark bands */
  --white: #ffffff;

  /* ============ WARM ACCENT (peach -> terracotta) + GOLD -- used sparingly ============ */
  --accent: #d98c5a; /* LOCKED */
  --accent-600: #cc7e4c; /* hover/solid mid */
  --accent-700: #bd7440;
  --accent-800: #a25f30; /* accent TEXT-on-light, AA-safe */
  --accent-300: #ecbb96; /* light accent for tints/rings */
  --accent-200: #f0d3bd; /* soft accent border/tint */
  --accent-100: #f7e6d6;
  --accent-50: #fbf2ea; /* faintest accent wash */
  --gold: #b08d4f;
  --gold-soft: #c7a468; /* lighter gold for hairline rules + nav tick */

  /* ============ ALIASES (keep existing component CSS alive) ============ */
  --green-900: var(--blue-900);
  --green-800: var(--blue-800);
  --green-700: var(--blue-600);
  --green-600: var(--blue-700);
  --green-500: var(--blue-500);
  --green-300: var(--blue-300);
  --green-100: var(--blue-100);
  --gold-700: var(--accent-700);

  /* ============ STATUS ============ */
  --verified: #2f7d5b; /* calm green ONLY for the verified tick -- never expand */
  --verified-bg: #e2efe8;
  --verified-line: #bfe0cf;
  --listed: var(--accent-700);
  --scraped: #9aa3a8;
  --danger: #9c4b3b;
  --danger-bg: #fae9e5;
  --focus: #5a90ac; /* canonical focus hue (= --blue-500) */

  /* ============ GRADIENTS (named, reused everywhere) ============ */
  --grad-brand: linear-gradient(
    180deg,
    var(--blue-600) 0%,
    var(--blue-700) 100%
  );
  --grad-brand-hover: linear-gradient(
    180deg,
    var(--blue-500) 0%,
    var(--blue-600) 100%
  );
  --grad-deep: linear-gradient(
    165deg,
    var(--blue-700) 0%,
    var(--blue-900) 100%
  );
  --grad-accent: linear-gradient(
    180deg,
    var(--accent) 0%,
    var(--accent-700) 100%
  );
  --grad-hero: linear-gradient(
    180deg,
    var(--cream) 0%,
    var(--blue-25) 58%,
    var(--blue-50) 100%
  );
  --grad-band: linear-gradient(
    180deg,
    var(--blue-25) 0%,
    var(--surface-2) 100%
  );
  --grad-sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0) 60%
  );
  --grad-placeholder: linear-gradient(
    150deg,
    var(--blue-500) 0%,
    var(--blue-700) 70%,
    var(--blue-800) 100%
  );

  /* ============ TYPE ============ */
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-sans:
    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* type scale */
  --fs-eyebrow: 0.76rem;
  --fs-meta: 0.9rem;
  --fs-body: 1.0625rem; /* 17px */
  --fs-lede: 1.2rem;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* ============ SCALE / RADIUS ============ */
  --maxw: 1200px;
  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ============ ELEVATION -- cool-blue tint, two-layer (the big upgrade) ============
     Shadows tint toward --blue-900 (29,55,68) so depth reads as one warm light
     source, never gray/muddy. Ambient + key per step. */
  --shadow-xs: 0 1px 2px rgba(29, 55, 68, 0.05);
  --shadow-sm:
    0 1px 2px rgba(29, 55, 68, 0.06), 0 2px 4px rgba(29, 55, 68, 0.04);
  --shadow: 0 2px 6px rgba(29, 55, 68, 0.05), 0 8px 22px rgba(29, 55, 68, 0.08);
  --shadow-md:
    0 4px 10px rgba(29, 55, 68, 0.06), 0 14px 34px rgba(29, 55, 68, 0.11);
  --shadow-lg:
    0 8px 18px rgba(29, 55, 68, 0.08), 0 26px 60px rgba(29, 55, 68, 0.16);
  --shadow-xl:
    0 12px 28px rgba(29, 55, 68, 0.1), 0 40px 90px rgba(29, 55, 68, 0.2);
  --shadow-blue: 0 8px 24px rgba(70, 124, 153, 0.3); /* primary btn hover */
  --shadow-accent: 0 8px 22px rgba(217, 140, 90, 0.28);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.55); /* glass top edge */
  --ring: 0 0 0 3px rgba(90, 144, 172, 0.32); /* single focus-ring source */
  --ring-accent: 0 0 0 3px rgba(217, 140, 90, 0.3);

  /* ============ SPACING ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px; /* hero/major-section breathing */

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(
    0.16,
    1,
    0.3,
    1
  ); /* decisive then settle (reveals) */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle hover */
  --ease-spring: cubic-bezier(
    0.34,
    1.4,
    0.64,
    1
  ); /* tiny overshoot -- controls ONLY */
  --dur-1: 0.16s;
  --dur-2: 0.28s;
  --dur-3: 0.5s;
  --dur-4: 0.8s; /* hero/reveal */
}