/* ClimateScope design system tokens */
/* Source palette: Forest #4C6A53, Sage #B4C4A8, Earth #C7A28F, Slate #8A9A92. */

/* Self-hosted Geist (MIT, redistributed via vercel/geist-font). Replaces the
   Google Fonts CDN dependency: kills the 810 ms cross-origin chain
   (fonts.googleapis.com -> fonts.gstatic.com) that Lighthouse flagged as the
   single biggest LCP blocker. font-display: swap matches Google Fonts'
   previous behavior. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Geist-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Geist-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Geist-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Geist-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/GeistMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/GeistMono-Medium.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Primitive color */
  --cs-stone-50: oklch(98.35% 0.0079 106.5);
  --cs-stone-100: oklch(96.8% 0.0105 106.5);
  --cs-stone-200: oklch(94.2% 0.012 108);
  --cs-chalk: oklch(99.1% 0.004 106.5);
  --cs-ink: oklch(31.44% 0.015 129);
  --cs-ink-strong: oklch(22.5% 0.018 132);

  --cs-forest-300: oklch(67% 0.043 151.4);
  --cs-forest-400: oklch(58% 0.048 151.4);
  --cs-forest-500: oklch(44.75% 0.0438 155.08); /* #415C4A — mock anchor */
  --cs-forest-600: oklch(39.63% 0.0381 155.68); /* #364D3E — mock anchor */
  --cs-forest-700: oklch(34% 0.049 151.4);

  --cs-sage-100: oklch(91% 0.023 131.7);
  --cs-sage-200: oklch(86% 0.033 131.7);
  --cs-sage-300: oklch(80.04% 0.0424 131.74); /* #B4C4A8 — mock anchor */
  --cs-sage-400: oklch(75.09% 0.0498 129.80); /* #A4B594 — mock anchor */

  --cs-earth-200: oklch(84% 0.034 48.7);
  --cs-earth-300: oklch(78% 0.045 48.7);
  --cs-earth-400: oklch(74.07% 0.0515 48.66); /* #C7A28F — caution FILL anchor */
  --cs-earth-500: oklch(66% 0.057 48.7);
  --cs-earth-700: oklch(45% 0.095 47);        /* caution TEXT pairing, warmer clay (~7:1 on chalk) */

  --cs-slate-200: oklch(84% 0.012 164.3);
  --cs-slate-300: oklch(75% 0.017 164.3);
  --cs-slate-400: oklch(67.11% 0.0217 164.3);
  --cs-slate-500: oklch(55% 0.024 164.3);
  --cs-slate-600: oklch(43% 0.024 160.73);     /* darkened for ~5.5:1 contrast safety margin on chalk */

  --cs-rain-200: oklch(82% 0.031 222.8);
  --cs-rain-300: oklch(72% 0.039 222.8);
  --cs-rain-400: oklch(63.17% 0.0485 234.36); /* #6D8FA3 — rain FILL anchor */
  --cs-rain-500: oklch(51% 0.05 222.8);
  --cs-rain-700: oklch(42% 0.095 234);        /* rain TEXT pairing, fuller blue (~7:1 on chalk) */

  /* Surface neutrals tuned to mock anchors */
  --cs-surface-alt: oklch(95.25% 0.0057 128.53);   /* #EEF0EC — mock Surface Alt Panel */
  --cs-border-subtle: oklch(92.00% 0.0076 151.88); /* #E1E6E2 — mock Border Subtle */

  /* Semantic color */
  --cs-color-canvas: var(--cs-stone-100);
  --cs-color-canvas-warm: var(--cs-stone-100);
  --cs-color-surface: var(--cs-chalk);
  --cs-color-surface-muted: var(--cs-surface-alt);
  --cs-color-text: var(--cs-ink-strong);
  --cs-color-text-muted: var(--cs-slate-600);
  --cs-color-border: var(--cs-border-subtle);
  --cs-color-border-strong: var(--cs-slate-300);

  --cs-color-primary: var(--cs-forest-500);
  --cs-color-primary-hover: var(--cs-forest-600);
  --cs-color-primary-active: var(--cs-forest-700);
  --cs-color-primary-contrast: var(--cs-chalk);

  --cs-color-secondary: var(--cs-sage-300);
  --cs-color-secondary-hover: var(--cs-sage-400);
  --cs-color-secondary-soft: var(--cs-sage-100);
  --cs-color-disabled-bg: oklch(90.5% 0.012 126);
  --cs-color-disabled-text: oklch(56% 0.016 132);

  --cs-color-threshold: var(--cs-earth-400);          /* caution FILL (map regions, badges) */
  --cs-color-threshold-text: var(--cs-earth-700);     /* caution TEXT on light surface, WCAG AAA */
  --cs-color-precipitation: var(--cs-rain-400);       /* rain FILL */
  --cs-color-precipitation-text: var(--cs-rain-700);  /* rain TEXT on light surface, WCAG AAA */
  --cs-color-focus: var(--cs-rain-400);

  /* Typography — fonts */
  --cs-font-sans: "Geist", "Geist Sans", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cs-font-mono: "Geist Mono", "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  /* Type scale — rem-based so user-zoom and browser font-size settings apply proportionally.
     1rem = 16px assumed. */
  /* Headings */
  --cs-h1-size: 2rem;     --cs-h1-line: 2.75rem; --cs-h1-tracking: -0.02em;
  --cs-h2-size: 1.75rem;  --cs-h2-line: 2.25rem; --cs-h2-tracking: -0.02em;
  --cs-h3-size: 1.5rem;   --cs-h3-line: 2rem;    --cs-h3-tracking: -0.02em;
  --cs-h4-size: 1.25rem;  --cs-h4-line: 1.75rem; --cs-h4-tracking: -0.01em;
  --cs-h5-size: 1.125rem; --cs-h5-line: 1.5rem;  --cs-h5-tracking: 0;
  --cs-h6-size: 1rem;     --cs-h6-line: 1.5rem;  --cs-h6-tracking: 0;

  /* Paragraphs */
  --cs-p-lg-size: 1.125rem; --cs-p-lg-line: 1.75rem;
  --cs-p-md-size: 1rem;     --cs-p-md-line: 1.5rem;
  --cs-p-sm-size: 0.875rem; --cs-p-sm-line: 1.25rem;
  --cs-p-xs-size: 0.75rem;  --cs-p-xs-line: 1rem;

  /* Labels (weight 500) */
  --cs-label-lg-size: 1rem;     --cs-label-lg-line: 1.125rem;
  --cs-label-md-size: 0.875rem; --cs-label-md-line: 1rem;
  --cs-label-sm-size: 0.75rem;  --cs-label-sm-line: 1rem;
  --cs-label-xs-size: 0.625rem; --cs-label-xs-line: 0.875rem;
  --cs-label-weight: 500;

  /* Font weights */
  --cs-font-weight-normal: 400;
  --cs-font-weight-medium: 500;
  --cs-font-weight-semibold: 600;
  --cs-font-weight-bold: 700;

  /* Letter-spacing tokens */
  --cs-letter-spacing-tight:   -0.02em;   /* h1-h3 display */
  --cs-letter-spacing-snug:    -0.01em;   /* h4, large headlines */
  --cs-letter-spacing-display: -0.005em;  /* brand mark, small display */
  --cs-letter-spacing-normal:  0;
  --cs-letter-spacing-label:   0.08em;    /* mono atlas eyebrows */

  /* Spacing */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 20px;
  --cs-space-6: 24px;
  --cs-space-8: 32px;
  --cs-space-10: 40px;
  --cs-space-12: 48px;
  --cs-space-16: 64px;

  /* Shape and elevation */
  --cs-radius-sm: 4px;
  --cs-radius-md: 8px;
  --cs-radius-lg: 12px;
  --cs-radius-xl: 16px;
  --cs-radius-2xl: 20px;
  --cs-radius-3xl: 24px;
  --cs-radius-full: 9999px;
  --cs-shadow-panel: 0 24px 52px oklch(35% 0.035 132 / 0.09);
  --cs-shadow-lift: 0 12px 24px oklch(31% 0.045 148 / 0.15);
  --cs-shadow-card: 0 1px 0 var(--cs-border-subtle), 0 8px 20px oklch(35% 0.025 148 / 0.08);
  --cs-shadow-control: 0 1px 0 var(--cs-border-subtle);
  --cs-shadow-selected: 0 4px 12px oklch(35% 0.045 148 / 0.18);
  --cs-shadow-none: none;

  /* Motion (durations + easings) */
  --cs-motion-fast: 120ms;
  --cs-motion-medium: 200ms;
  --cs-motion-slow: 280ms;
  --cs-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --cs-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Control sizing — paddings, heights, hit areas */
  --cs-control-padding-sm: 6px 12px;
  --cs-control-padding-md: 8px 14px;
  --cs-control-padding-lg: 10px 18px;
  --cs-control-padding-input: 9px 32px 9px 12px;  /* selects with chevron */
  --cs-control-height-sm: 24px;
  --cs-control-height-md: 32px;
  --cs-control-height-lg: 40px;

  /* Application-shell constants — product layout, not design-system colors. */
  --cs-shell-topbar-height: 64px;
  --cs-shell-card-width: 300px;
  --cs-shell-card-width-compact: 260px;
  --cs-shell-card-column: 360px;     /* width reserved for card overlay before map renders */
  --cs-shell-map-height-min: 540px;
  --cs-shell-map-height-max: 640px;
  --cs-shell-drawer-width: 560px;
  --cs-shell-brand-mark: 22px;
  --cs-bp-tablet: 800px;
  --cs-bp-tablet-lg: 960px;
  --cs-bp-mobile: 640px;

  /* Opacity */
  --cs-opacity-5:  0.05;
  --cs-opacity-10: 0.10;
  --cs-opacity-20: 0.20;
  --cs-opacity-30: 0.30;
  --cs-opacity-40: 0.40;
  --cs-opacity-50: 0.50;
  --cs-opacity-60: 0.60;
  --cs-opacity-75: 0.75;
  --cs-opacity-90: 0.90;

  /* Component aliases */
  --cs-button-primary-bg: var(--cs-color-primary);
  --cs-button-primary-hover-bg: var(--cs-color-primary-hover);
  --cs-button-primary-active-bg: var(--cs-color-primary-active);
  --cs-button-secondary-bg: var(--cs-color-secondary-soft);
  --cs-button-secondary-hover-bg: color-mix(in oklch, var(--cs-color-secondary) 62%, var(--cs-color-surface));
  --cs-button-disabled-bg: var(--cs-color-disabled-bg);
  --cs-button-disabled-text: var(--cs-color-disabled-text);
}