/* CO₂ Calculator design system · tokens (v2, Material 3 Expressive)
   White label: a bank changes color, type, shape and motion here only. Components read system
   roles (--md-*, --shape-*, --type-*), never reference tones or hex values.
   Tones follow M3: tone = CIELAB L*. Seed #09865C, hue 161. Light scheme. */

:root {
  /* ---------- Reference palettes ---------- */
  /* Primary (seed). 40 is the text green from the Figma file, 50 the brand green. */
  --ref-primary-10: #002113;
  --ref-primary-20: #003824;
  --ref-primary-30: #035136;
  --ref-primary-40: #096B4B;
  --ref-primary-50: #09865C;
  --ref-primary-60: #35A376;
  --ref-primary-70: #54BE90;
  --ref-primary-80: #7BD9AD;
  --ref-primary-90: #B0F0D0;
  --ref-primary-95: #D9F8E7;
  --ref-primary-98: #EEFCF4;
  --ref-primary-99: #F6FEF9;

  /* Secondary: the seed hue at low chroma, for selected and tonal states */
  --ref-secondary-10: #0A1F16;
  --ref-secondary-30: #354C40;
  --ref-secondary-90: #CEE9DB;
  --ref-secondary-95: #DCF5E8;

  /* Tertiary: indigo, used as the accent next to green (charts, highlights) */
  --ref-tertiary-10: #001849;
  --ref-tertiary-30: #224195;
  --ref-tertiary-40: #4358B0;
  --ref-tertiary-50: #4C5FB8;
  --ref-tertiary-90: #E0E0FE;
  --ref-tertiary-95: #F0EFFF;

  /* Ochre: third chart series only */
  --ref-ochre-40: #855303;
  --ref-ochre-60: #C27C0E;
  --ref-ochre-90: #FFDDBB;

  /* Neutral and neutral variant, tinted green */
  --ref-neutral-10: #171D1A;
  --ref-neutral-20: #2B322E;
  --ref-neutral-90: #DCE5E0;
  --ref-neutral-92: #E1EAE5;
  --ref-neutral-94: #E7F0EB;
  --ref-neutral-96: #EDF6F1;
  --ref-neutral-98: #F3FBF7;
  --ref-neutral-100: #FFFFFF;
  --ref-nv-30: #3D4A43;
  --ref-nv-40: #54615A;
  --ref-nv-50: #6C7A73;
  --ref-nv-80: #BBCAC2;

  /* Error (M3 baseline) and two custom colors built the same way */
  --ref-error-40: #B3261E;
  --ref-error-10: #410E0B;
  --ref-error-90: #F9DEDC;
  --ref-warning-40: #825502;
  --ref-warning-10: #2B1700;
  --ref-warning-90: #FFDDB6;

  /* ---------- System roles ---------- */
  /* Dark greens (40 and below) only for text, the main button and data. Light greens for atmosphere. */
  --md-primary: var(--ref-primary-40);              /* filled button, links, focus; white on it 6.5:1 */
  --md-on-primary: var(--ref-neutral-100);
  --md-primary-text: var(--ref-primary-40);          /* 6.2:1 on surface, 5.8:1 on primary-95 */
  --md-primary-container: var(--ref-primary-90);
  --md-on-primary-container: var(--ref-primary-10);
  --md-primary-soft: var(--ref-primary-95);          /* selected cards, hero wash */
  --md-secondary-container: var(--ref-secondary-90);
  --md-on-secondary-container: var(--ref-secondary-10);
  --md-tertiary: var(--ref-tertiary-40);
  --md-tertiary-container: var(--ref-tertiary-90);
  --md-on-tertiary-container: var(--ref-tertiary-10);

  --md-surface: var(--ref-neutral-96);              /* a tinted ground so white cards stand out */
  --md-surface-container-lowest: var(--ref-neutral-100);
  --md-surface-container-low: var(--ref-neutral-96);
  --md-surface-container: var(--ref-neutral-94);
  --md-surface-container-high: var(--ref-neutral-92);
  --md-surface-container-highest: var(--ref-neutral-90);
  --md-on-surface: var(--ref-neutral-10);            /* 16.3:1 on surface */
  --md-on-surface-variant: var(--ref-nv-30);         /* 8.9:1 on surface */
  --md-on-surface-muted: var(--ref-nv-40);           /* 6.2:1 on surface, for meta text */
  --md-outline: var(--ref-nv-50);
  --md-outline-variant: var(--ref-nv-80);
  --md-inverse-surface: var(--ref-neutral-20);
  --md-inverse-on-surface: var(--ref-neutral-94);
  --md-inverse-primary: var(--ref-primary-80);
  --md-scrim: rgb(23 29 26 / .4);

  --md-error: var(--ref-error-40);
  --md-on-error: var(--ref-neutral-100);
  --md-error-container: var(--ref-error-90);
  --md-on-error-container: var(--ref-error-10);
  --md-success: var(--ref-primary-40);
  --md-success-container: var(--ref-primary-95);
  --md-on-success-container: var(--ref-primary-10);
  --md-warning: var(--ref-warning-40);
  --md-warning-container: var(--ref-warning-90);
  --md-on-warning-container: var(--ref-warning-10);

  /* Atmosphere: the mint wash from the original prototype. Dark text on it (on-surface, 15:1 at the lightest stop). */
  --surface-hero: radial-gradient(120% 90% at 50% 0%, var(--ref-primary-95) 0%, var(--ref-primary-98) 45%, var(--md-surface) 100%);
  --surface-hero-soft: linear-gradient(180deg, var(--ref-primary-98) 0%, var(--md-surface) 100%);
  --on-surface-hero: var(--md-on-surface);
  --on-surface-hero-variant: var(--md-on-surface-variant);
  --motif-line: var(--ref-primary-80);               /* leaves and wave strokes, decorative only */
  --motif-fill: var(--ref-primary-90);

  /* Data visualization */
  --viz-1: var(--ref-primary-50);                    /* categorical, fixed order, CVD validated */
  --viz-2: var(--ref-tertiary-50);
  --viz-3: var(--ref-ochre-60);
  --viz-seq-1: var(--ref-primary-30);                /* sequential greens, dark to light */
  --viz-seq-2: var(--ref-primary-50);
  --viz-seq-3: var(--ref-primary-70);
  --viz-seq-4: var(--ref-primary-90);
  --viz-accent: var(--ref-tertiary-50);              /* the largest source */
  --viz-track: var(--md-surface-container-high);

  /* State layers */
  --state-hover: .08;
  --state-focus: .10;
  --state-pressed: .12;
  --disabled-content: .38;
  --disabled-container: .12;
  --disabled-rgb: 23 29 26;                          /* on-surface as rgb channels for disabled states */

  /* ---------- Typography ---------- */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-text: "Roboto Flex", "Roboto", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  --display-xl: 800 88px/88px var(--font-display);  /* the report total */
  --display-l: 700 64px/72px var(--font-display);
  --display-m: 700 48px/56px var(--font-display);
  --display-s: 700 36px/44px var(--font-display);
  --display-s-alt: 700 40px/48px var(--font-display);  /* hero title on phones */
  --headline-l: 700 32px/40px var(--font-display);
  --headline-m: 700 28px/36px var(--font-display);
  --headline-s: 700 24px/32px var(--font-display);
  --title-l: 600 22px/28px var(--font-display);
  --title-m: 600 16px/24px var(--font-text);
  --title-s: 600 14px/20px var(--font-text);
  --body-l: 400 16px/24px var(--font-text);
  --body-m: 400 14px/20px var(--font-text);
  --body-s: 400 12px/16px var(--font-text);
  --label-l: 600 14px/20px var(--font-text);
  --label-m: 600 12px/16px var(--font-text);
  --kicker: 500 12px/16px var(--font-mono);
  --tracking-display: -.02em;
  --tracking-headline: -.01em;
  --tracking-body: .01em;
  --tracking-label: .02em;
  --tracking-kicker: .08em;

  /* ---------- Spacing ---------- */
  /* Layout uses the portfolio scale; component internals use the 4dp grid. */
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;
  --inset-4: 4px;
  --inset-8: 8px;
  --inset-12: 12px;

  /* ---------- Shape ---------- */
  --shape-s: 12px;        /* chips, small tiles, tooltips */
  --shape-m: 16px;        /* fields, banners, icon tiles */
  --shape-l: 24px;        /* cards */
  --shape-xl: 28px;       /* large containers, dialogs, hero blocks */
  --shape-full: 999px;    /* buttons, progress, switches */

  /* ---------- Elevation (only for things that float) ---------- */
  --elev-1: 0 1px 2px rgb(23 29 26 / .12), 0 1px 3px 1px rgb(23 29 26 / .06);
  --elev-2: 0 2px 6px 2px rgb(23 29 26 / .08), 0 1px 2px rgb(23 29 26 / .12);
  --elev-3: 0 8px 24px 4px rgb(23 29 26 / .10), 0 2px 4px rgb(23 29 26 / .12);
  --elev-card: 0 0 0 1px rgb(23 29 26 / .06), 0 1px 2px rgb(23 29 26 / .08), 0 4px 12px rgb(23 29 26 / .05);  /* resting cards: a faint edge plus lift */

  /* ---------- Motion (M3 Expressive) ---------- */
  --ease-spatial: cubic-bezier(.34, 1.36, .64, 1);   /* position and size, small overshoot */
  --ease-spatial-soft: cubic-bezier(.3, 1.15, .5, 1);
  --ease-effects: cubic-bezier(.2, 0, 0, 1);         /* color and opacity, no overshoot */
  --dur-150: 150ms;
  --dur-250: 250ms;
  --dur-400: 400ms;
  --dur-600: 600ms;

  /* ---------- Layout ---------- */
  --content-max: 1200px;
  --bar-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-150: 0ms; --dur-250: 0ms; --dur-400: 0ms; --dur-600: 0ms; }
}