/* ── WRMP Design Tokens ──────────────────────────
   Single source of truth for brand colors, typography,
   and spacing. No selectors — just custom properties.
   Exhibits can override any token in their own <style>. */

/* ── Radix Colors ────────────────────────────────
   Imported via CDN @3.0.0. Light scales define
   --cyan-1…--cyan-12 (and --cyan-a*) on :root.
   Matching *-dark.css files redefine the same variable
   names under .dark, .dark-theme (not separate
   --cyan-dark-* names). Pin to a published version —
   @3.0.3 does not exist on npm (404).               */
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/gray.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/gray-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/gray-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/gray-dark-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/cyan.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/cyan-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/cyan-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/cyan-dark-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/amber.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/amber-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/amber-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/amber-dark-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/orange.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/orange-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/orange-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/orange-dark-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/grass.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/grass-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/grass-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/grass-dark-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/lime.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/lime-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/lime-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/lime-dark-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/sky.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/sky-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/sky-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/sky-dark-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/brown.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/brown-dark.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/brown-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/brown-dark-alpha.css");

/* ── Self-hosted brand fonts ─────────────────────
   Source Sans Pro (all UI typography — body and headings).
   Paths are relative to the CSS file location.       */

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography — self-hosted, with Google Fonts variable versions as upgrade fallbacks */
  --font-body: "Source Sans Pro", "Source Sans 3", Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);

  /* Fluid type scale — Utopia @link https://utopia.fyi/type/calculator?c=360,14,1.2,1240,16,1.25,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--1: clamp(
    0.7292rem,
    0.7002rem + 0.1288vw,
    0.8rem
  ); /* ~12–13px · kicker, captions, labels  */
  --step-0: clamp(
    0.875rem,
    0.8239rem + 0.2273vw,
    1rem
  ); /* ~14–16px · body, nav, legend         */
  --step-1: clamp(
    1.05rem,
    0.9682rem + 0.3636vw,
    1.25rem
  ); /* ~17–20px · heading-sm, stat, callout */
  --step-2: clamp(
    1.26rem,
    1.1363rem + 0.55vw,
    1.5625rem
  ); /* ~20–25px · heading-md                */
  --step-3: clamp(
    1.512rem,
    1.3315rem + 0.802vw,
    1.9531rem
  ); /* ~24–31px · heading-lg                */
  --step-4: clamp(
    1.8144rem,
    1.5579rem + 1.14vw,
    2.4414rem
  ); /* ~29–39px · display, cover title      */

  /* Semantic font sizes — alias the fluid scale (used by design-system, leaflet-overrides, some exhibits) */
  --size-sm: var(--step-0);
  --size-base: var(--step-1);
  --size-lg: var(--step-2);
  --size-xl: var(--step-3);
  --size-xxl: var(--step-4);

  /* Heading type tokens — grouped by style level */
  --type-display-size: var(--step-3); /* 29–39px · cover title      */
  --type-display-weight: 400;
  --type-display-line: 1.1;

  --type-heading-lg-size: var(--step-2); /* 24–31px · main panel title */
  --type-heading-lg-weight: 400;
  --type-heading-lg-line: 1.15;

  --type-heading-md-size: var(--step-1); /* 20–25px · section title    */
  --type-heading-md-weight: 600;
  --type-heading-md-line: 1.2;

  --type-heading-sm-size: var(--step-0); /* 17–20px · subsection label */
  --type-heading-sm-weight: 600;
  --type-heading-sm-line: 1.3;

  --type-body-size: var(--step-0); /* 14–16px · body copy          */
  --type-body-weight: 400;
  --type-body-line: 1.7;

  /* Text color roles */
  --color-text: var(--gray-12); /* primary text, headings       */
  --color-text-subtle: var(--gray-11); /* de-emphasized / secondary    */

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Border radius */
  --radius-sm: 4px; /* chips, tags             */
  --radius-md: 6px; /* images, inner cards      */
  --radius-lg: 8px; /* popup card, map controls */
  --radius-xl: 12px; /* story panel, exhibits    */

  /* ── WRMP brand palette — reference only ────────
       Original hex values. Swap these into the active
       tokens below to restore color.                  */
  --wrmp-teal-brand: #228b9c;
  --wrmp-ada-teal-brand: #005e6a;
  --wrmp-orange-brand: #e09337;
  --wrmp-dark-orange-brand: #d66b2c;
  --wrmp-green-brand: #379352;
  --wrmp-light-green-brand: #92bb4d;
  --wrmp-dark-brand: #4e4e50;
  --wrmp-sky-blue-brand: #00acec;
  --wrmp-earth-brand: #664d26;
  --wrmp-text-brand: #272525;

  /* ── Active semantic palette → Radix Colors ─────
       Mapped from WRMP brand to nearest Radix scale.
       Brand reference values are preserved above.    */
  --wrmp-ada-teal: var(--cyan-12);     /* headings, primary text, links  */
  --wrmp-teal: var(--cyan-9);          /* decorative, step dots, accents */
  --wrmp-dark: var(--gray-11);         /* secondary text, UI chrome      */
  --wrmp-text: var(--gray-12);         /* body text                      */
  --wrmp-light-green: var(--lime-9);   /* kicker, callout bar            */
  --wrmp-orange: var(--amber-9);       /* accent, warning                */
  --wrmp-dark-orange: var(--orange-9); /* dark accent                    */
  --wrmp-green: var(--grass-9);        /* heritage green                 */
  --wrmp-sky-blue: var(--sky-9);       /* sky blue                       */
  --wrmp-earth: var(--brown-9);        /* earth tone                     */

  /* ── Region colors → Radix Colors ───────────────
       South Bay (teal), North Bay (green), Suisun (amber). */
  --color-south-bay: var(--cyan-12);
  --color-north-bay: var(--grass-9);
  --color-suisun: var(--amber-9);

  /* Panel */
  --color-panel-translucent: #ffffffb3;
  --panel-bg: var(--color-panel-translucent);
  --panel-width: 42%;
  --panel-inset: 16px;

  /* Elevation shadows */
  --shadow-card: 0px 4px 8px rgba(0, 0, 0, 0.07),
    0px 14px 14px rgba(0, 0, 0, 0.06), 0px 32px 19px rgba(0, 0, 0, 0.04),
    0px 57px 23px rgba(0, 0, 0, 0.01), 0px 89px 25px rgba(0, 0, 0, 0);
}