/* ============================================================
   env.computer — Design Tokens · Dual theme (2026)
   The single source of truth for visual language.

   Architecture:
   - :root defines the LIGHT theme — warm whites, soft neutral
     surfaces, restrained pine-green as the signature accent.
   - html[data-theme="dark"] overrides with the "Deep Forest"
     dark theme — green-tinted charcoal, luminous teal + amber.
   - Ramps are SEMANTIC: ink-900/brand-900 = strongest (text),
     ink-50/brand-50 = subtlest (fills/tints) — in BOTH themes.
   - Components must reference tokens only; never raw hex.
   - Theme is set pre-paint via a tiny inline script on <html>
     (localStorage 'ec-theme', falling back to OS preference).
   ============================================================ */

:root {
  /* ---------- Brand: Pine Green (environment) — restrained accent ---------- */
  --brand-50:  #edf5f0;   /* subtle tint — chip / active-nav backgrounds */
  --brand-100: #dcebe3;   /* tint border */
  --brand-200: #b9d8ca;
  --brand-300: #8abfa9;
  --brand-400: #4f9d7f;
  --brand-500: #2a8464;
  --brand-600: #177452;   /* Primary brand */
  --brand-700: #125e43;   /* strong text on tints */
  --brand-800: #0e4a35;
  --brand-900: #0a3626;   /* deepest */

  /* ---------- Accent: Solar Amber (AI / intelligence) ---------- */
  --accent-50:  #fdf6e7;
  --accent-100: #faebc8;
  --accent-200: #f3d48a;
  --accent-300: #e5b54e;
  --accent-400: #c98f1b;
  --accent-500: #b0790f;   /* AI accent */
  --accent-600: #8a5e0e;
  --accent-700: #6e4a0b;   /* strongest text on tints */

  /* ---------- Ink: text + UI neutrals (warm, green-tinted gray) ---------- */
  --ink-900: #171d1a;   /* primary text */
  --ink-800: #262e2a;
  --ink-700: #3d4742;
  --ink-600: #576660;
  --ink-500: #6f7e77;   /* muted text */
  --ink-400: #93a09a;
  --ink-300: #b9c2bd;
  --ink-200: #dde1dd;   /* strong border */
  --ink-150: #e7eae6;   /* subtle border */
  --ink-100: #eff1ed;   /* fill */
  --ink-50:  #f6f7f4;   /* subtle fill */

  /* ---------- Surfaces ---------- */
  --bg:           #fafaf8;   /* App canvas — warm white */
  --surface:      #ffffff;   /* Cards, topbar */
  --surface-2:    #f6f6f2;   /* Recessed: sidebar, table heads */
  --surface-3:    #f1f1eb;   /* Raised / hover */
  --surface-inv:  #0f1a16;   /* Inverted (dark) surface for contrast blocks */
  --surface-rgb:  255, 255, 255;

  /* ---------- Interaction primitives ---------- */
  --primary:        var(--brand-600);
  --primary-hover:  #135f44;
  --primary-active: #10513a;
  --on-primary:     #ffffff;   /* text/icon on primary fills */
  --hover-veil:       rgba(23, 29, 26, 0.045); /* neutral hover wash */
  --hover-tint-brand: rgba(23, 116, 82, 0.06); /* brand-tinted hover wash */
  --scrim:            rgba(15, 26, 22, 0.4);
  --cite-num-bg:      #ffffff;
  --pulse-ring:       rgba(42, 132, 100, 0.45);

  /* ---------- Ambient auras (page backdrops — keep faint) ---------- */
  --aura-brand:  rgba(23, 116, 82, 0.055);
  --aura-accent: rgba(176, 121, 15, 0.04);

  /* ---------- Glass (topbar only) ---------- */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(23, 29, 26, 0.07);
  --glass-blur: saturate(1.3) blur(14px);

  /* ---------- Semantic ---------- */
  --success: #157347;
  --success-bg: #e7f5ee;
  --warning: #b45309;
  --warning-bg: #fbf0da;
  --danger:  #b91c1c;
  --danger-bg: #fbe9e9;
  --info:    #1d4ed8;
  --info-bg: #e8effc;

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ---------- Spacing (4px base, 8px rhythm) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---------- Shadows — soft, neutral, layered ---------- */
  --sh-xs: 0 1px 2px rgba(23, 29, 26, 0.04);
  --sh-sm: 0 1px 2px rgba(23, 29, 26, 0.06), 0 1px 1px rgba(23, 29, 26, 0.04);
  --sh-md: 0 4px 12px -2px rgba(23, 29, 26, 0.08), 0 2px 4px -2px rgba(23, 29, 26, 0.05);
  --sh-lg: 0 12px 32px -8px rgba(23, 29, 26, 0.13), 0 4px 12px -4px rgba(23, 29, 26, 0.07);
  --sh-xl: 0 24px 56px -12px rgba(23, 29, 26, 0.17), 0 8px 20px -8px rgba(23, 29, 26, 0.09);
  --sh-glow: 0 0 0 3px rgba(23, 116, 82, 0.13);
  --sh-glow-accent: 0 0 0 3px rgba(176, 121, 15, 0.16);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --glow-brand: 0 0 0 3px rgba(23, 116, 82, 0.12);
  --glow-accent: 0 0 0 3px rgba(176, 121, 15, 0.14);
  --glow-danger: 0 0 0 3px rgba(185, 28, 28, 0.14);
  --glow-card-hover: 0 0 0 transparent;

  /* ---------- Borders ---------- */
  --border-subtle: 1px solid var(--ink-150);
  --border-default: 1px solid var(--ink-200);
  --border-strong: 1px solid var(--ink-300);
  --border-brand: 1px solid var(--brand-200);

  /* ---------- Motion — fast, natural, purposeful ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.4, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --dur-slower: 460ms;

  /* ---------- Layout ---------- */
  --content-max: 1440px;
  --sidebar-w: 260px;
  --rail-w: 64px;
  --topbar-h: 56px;

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---------- Focus & scrollbar ---------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-500);
  --focus-ring-accent: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-400);
  --scrollbar-thumb: rgba(23, 29, 26, 0.16);
  --scrollbar-thumb-hover: rgba(23, 29, 26, 0.3);
}

/* ---------- Skill category accents (light) ---------- */
:root {
  --cat-env:  #177452;   /* Environmental Monitoring — pine */
  --cat-ehs:  #c2410c;   /* EHS Management — burnt orange */
  --cat-esg:  #6d28d9;   /* ESG Reporting — violet */
  --cat-reg:  #0e7490;   /* Regulatory Intelligence — cyan-slate */

  --cat-env-bg: #e7f3ee;
  --cat-ehs-bg: #fbede4;
  --cat-esg-bg: #f1eafb;
  --cat-reg-bg: #e5f3f7;
}

/* ============================================================
   DARK — "Deep Forest" (telemetry aesthetic, luminous accents)
   ============================================================ */
html[data-theme="dark"] {
  /* ---------- Brand: Forest Teal, luminous ---------- */
  --brand-50:  #0e211c;
  --brand-100: #143029;
  --brand-200: #1b463b;
  --brand-300: #27675a;
  --brand-400: #359b84;
  --brand-500: #3fbfa0;
  --brand-600: #4ad3b2;   /* Primary brand (bright) */
  --brand-700: #63e3c6;
  --brand-800: #96efd9;
  --brand-900: #c9f7ea;

  /* ---------- Accent: Solar Amber, luminous ---------- */
  --accent-50:  #291f09;
  --accent-100: #3a2b0c;
  --accent-200: #5c440f;
  --accent-300: #8f6a12;
  --accent-400: #c99417;
  --accent-500: #f0b429;
  --accent-600: #ffc94d;
  --accent-700: #ffd97a;

  /* ---------- Ink (green-tinted, inverted) ---------- */
  --ink-900: #ecf3ef;
  --ink-800: #d9e4de;
  --ink-700: #b9c8c0;
  --ink-600: #97a9a0;
  --ink-500: #7c8f86;
  --ink-400: #5f7169;
  --ink-300: #46564e;
  --ink-200: #32403a;
  --ink-150: #26332c;
  --ink-100: #1e2924;
  --ink-50:  #171f1b;

  /* ---------- Surfaces ---------- */
  --bg:           #0b100e;
  --surface:      #111815;
  --surface-2:    #0e1512;
  --surface-3:    #17211c;
  --surface-inv:  #e9f1ec;
  --surface-rgb:  17, 24, 21;

  /* ---------- Interaction primitives ---------- */
  --primary:        var(--brand-600);
  --primary-hover:  #63e3c6;
  --primary-active: #37c6a3;
  --on-primary:     #06231b;
  --hover-veil:       rgba(255, 255, 255, 0.05);
  --hover-tint-brand: rgba(74, 211, 178, 0.07);
  --scrim:            rgba(0, 0, 0, 0.55);
  --cite-num-bg:      rgba(0, 0, 0, 0.35);
  --pulse-ring:       rgba(74, 211, 178, 0.55);

  /* ---------- Ambient auras ---------- */
  --aura-brand:  rgba(63, 191, 160, 0.1);
  --aura-accent: rgba(240, 180, 41, 0.055);

  /* ---------- Glass ---------- */
  --glass-bg: rgba(15, 21, 18, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: saturate(1.4) blur(18px);

  /* ---------- Semantic ---------- */
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --danger:  #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --info:    #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.12);

  /* ---------- Shadows + glows ---------- */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
  --sh-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 14px -4px rgba(0, 0, 0, 0.4);
  --sh-xl: 0 28px 64px -12px rgba(0, 0, 0, 0.7), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --sh-glow: 0 0 0 3px rgba(63, 191, 160, 0.16), 0 0 24px -6px rgba(63, 191, 160, 0.35);
  --sh-glow-accent: 0 0 0 3px rgba(240, 180, 41, 0.18), 0 0 24px -6px rgba(240, 180, 41, 0.4);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glow-brand: 0 0 20px -2px rgba(74, 211, 178, 0.45);
  --glow-accent: 0 0 20px -2px rgba(255, 201, 77, 0.45);
  --glow-danger: 0 0 18px -2px rgba(248, 113, 113, 0.4);
  --glow-card-hover: 0 0 32px -10px rgba(74, 211, 178, 0.3);

  /* ---------- Focus & scrollbar ---------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-500);
  --focus-ring-accent: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-500);
  --scrollbar-thumb: rgba(236, 243, 239, 0.14);
  --scrollbar-thumb-hover: rgba(236, 243, 239, 0.28);

  /* ---------- Skill category accents (luminous) ---------- */
  --cat-env:  #45d6b2;
  --cat-ehs:  #ff9457;
  --cat-esg:  #b794f6;
  --cat-reg:  #5bc8e8;

  --cat-env-bg: rgba(69, 214, 178, 0.13);
  --cat-ehs-bg: rgba(255, 148, 87, 0.13);
  --cat-esg-bg: rgba(183, 148, 246, 0.14);
  --cat-reg-bg: rgba(91, 200, 232, 0.13);
}