/* =============================================================================
   TerraTrack — Design tokens
   =============================================================================
   Source: Design System v2 (2026-05-24).

   The UI is light-only by default: warm neutral surfaces, strong text contrast,
   one restrained blue accent, and small B2B radii. Legacy aliases are kept so
   the existing vanilla ESM app can adopt the design without touching business
   code or inline templates.
   ========================================================================= */

:root {
  /* Typography */
  --tt-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --tt-fs-11: 11px;
  --tt-fs-12: 12px;
  --tt-fs-13: 13px;
  --tt-fs-14: 14px;
  --tt-fs-15: 15px;
  --tt-fs-18: 18px;
  --tt-fs-22: 22px;
  --tt-fs-28: 28px;
  --tt-fs-36: 36px;

  --tt-lh-tight: 1.2;
  --tt-lh-normal: 1.45;
  --tt-lh-loose: 1.6;

  --tt-fw-regular: 400;
  --tt-fw-medium: 500;
  --tt-fw-semi: 600;
  --tt-fw-bold: 700;

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

  /* Radius */
  --tt-r-1: 4px;
  --tt-r-2: 6px;
  --tt-r-3: 8px;
  --tt-r-4: 10px;
  --tt-r-pill: 999px;

  /* Surfaces */
  --tt-bg: #FAFAF9;
  --tt-surface: #FFFFFF;
  --tt-surface-2: #F5F5F4;
  --tt-surface-3: #EFEEEC;
  --tt-overlay: rgba(15, 17, 21, 0.40);

  --tt-border: #E8E7E4;
  --tt-border-strong: #D9D8D4;
  --tt-divider: #EFEEEC;

  --tt-fg: #0A0B0D;
  --tt-fg-2: #3D3F46;
  --tt-fg-3: #6B6D75;
  --tt-fg-4: #9B9DA3;
  --tt-fg-on-accent: #FFFFFF;

  /* Accent */
  --tt-accent: #2563EB;
  --tt-accent-hover: #1D4ED8;
  --tt-accent-press: #1E40AF;
  --tt-accent-soft: #EFF4FF;
  --tt-accent-border: #C7D7FB;

  /* Semantic colors */
  --tt-success: #15803D;
  --tt-success-soft: #ECFDF3;
  --tt-success-border: #BBF0CB;

  --tt-warn: #B45309;
  --tt-warn-soft: #FEF6E7;
  --tt-warn-border: #F2DBA8;

  --tt-danger: #B91C1C;
  --tt-danger-soft: #FEF2F2;
  --tt-danger-border: #F5C2C2;

  --tt-info: #1D4ED8;
  --tt-info-soft: #EFF4FF;

  --tt-neutral-soft: #F1F1EF;
  --tt-neutral-border: #E0DFDC;

  /* Sector dots */
  --tt-sector-btp: #C2410C;
  --tt-sector-forestier: #166534;
  --tt-sector-transport: #6D28D9;
  --tt-sector-agricole: #A16207;
  --tt-sector-dechets: #0F766E;

  /* Shadows */
  --tt-shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 0 0 1px rgba(15, 17, 21, 0.04);
  --tt-shadow-2: 0 4px 12px rgba(15, 17, 21, 0.06), 0 0 0 1px rgba(15, 17, 21, 0.04);
  --tt-shadow-pop: 0 12px 32px rgba(15, 17, 21, 0.10), 0 0 0 1px rgba(15, 17, 21, 0.06);
  --tt-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* Layout */
  --tt-sidebar-w: 240px;
  --tt-topbar-h: 52px;
  --tt-content-max: 1400px;

  /* Motion */
  --tt-easing: cubic-bezier(0.2, 0, 0, 1);
  --tt-dur-fast: 120ms;
  --tt-dur: 180ms;

  /* Legacy aliases */
  --font-sans: var(--tt-font-sans);
  --font-mono: var(--tt-font-mono);

  --s-1: var(--tt-s-1);
  --s-2: var(--tt-s-2);
  --s-3: var(--tt-s-3);
  --s-4: var(--tt-s-4);
  --s-5: var(--tt-s-5);
  --s-6: var(--tt-s-6);
  --s-7: var(--tt-s-8);
  --s-8: var(--tt-s-10);
  --s-9: var(--tt-s-12);
  --s-10: var(--tt-s-16);
  --sp-1: var(--tt-s-1);
  --sp-2: var(--tt-s-2);
  --sp-3: var(--tt-s-3);
  --sp-4: var(--tt-s-4);
  --sp-5: var(--tt-s-5);
  --sp-6: var(--tt-s-6);

  --r-xs: var(--tt-r-1);
  --r-sm: var(--tt-r-2);
  --r-md: var(--tt-r-2);
  --r-lg: var(--tt-r-3);
  --r-xl: var(--tt-r-4);
  --r-2xl: 12px;
  --r-pill: var(--tt-r-pill);
  --r: var(--tt-r-3);
  --r2: var(--tt-r-2);
  --r3: var(--tt-r-1);

  --bg: var(--tt-bg);
  --bg-elev: var(--tt-surface);
  --surface: var(--tt-surface);
  --surface-hover: var(--tt-surface-2);
  --surface-active: var(--tt-surface-3);
  --glass: rgba(250, 250, 249, 0.92);
  --sur: var(--tt-surface-2);
  --card: var(--tt-surface);
  --card2: var(--tt-surface-2);

  --border: var(--tt-border);
  --border-strong: var(--tt-border-strong);
  --border-focus: rgba(37, 99, 235, 0.28);
  --bor: var(--tt-border);
  --bor2: var(--tt-border-strong);

  --fg: var(--tt-fg);
  --fg-secondary: var(--tt-fg-2);
  --fg-muted: var(--tt-fg-3);
  --fg-subtle: var(--tt-fg-4);
  --txt: var(--tt-fg);
  --txt2: var(--tt-fg-2);
  --txt3: var(--tt-fg-3);

  --accent: var(--tt-accent);
  --accent-fg: var(--tt-fg-on-accent);
  --accent-hover: var(--tt-accent-hover);
  --accent-soft: var(--tt-accent-soft);
  --accent-soft-strong: #DBEAFE;
  --acc: var(--tt-accent);
  --acc2: var(--tt-accent);
  --acc3: var(--tt-accent-hover);
  --acc-dim: var(--tt-accent-soft);
  --acc-glow: #DBEAFE;

  --success: var(--tt-success);
  --success-soft: var(--tt-success-soft);
  --danger: var(--tt-danger);
  --danger-soft: var(--tt-danger-soft);
  --info: var(--tt-info);
  --info-soft: var(--tt-info-soft);
  --warn: var(--tt-warn);
  --warn-soft: var(--tt-warn-soft);
  --grn: var(--tt-success);
  --grn-dim: var(--tt-success-soft);
  --red: var(--tt-danger);
  --red-dim: var(--tt-danger-soft);
  --blue: var(--tt-info);
  --blue-dim: var(--tt-info-soft);
  --orange: var(--tt-warn);
  --orange-dim: var(--tt-warn-soft);
  --pur: #6D28D9;
  --pur-dim: #F3E8FF;

  --dot-cold: #6D28D9;
  --dot-warm: #B45309;
  --dot-hot: #B91C1C;
  --dot-client: var(--tt-success);

  --shadow-xs: var(--tt-shadow-1);
  --shadow-sm: var(--tt-shadow-1);
  --shadow-md: var(--tt-shadow-2);
  --shadow-lg: var(--tt-shadow-pop);
  --shadow-xl: var(--tt-shadow-pop);
  --shadow-focus: var(--tt-focus-ring);
  --sh-sm: var(--tt-shadow-1);
  --sh-md: var(--tt-shadow-2);
  --sh-lg: var(--tt-shadow-pop);
  --sh-xl: var(--tt-shadow-pop);

  --sidebar-w: var(--tt-sidebar-w);
  --topbar-h: var(--tt-topbar-h);
  --content-max: var(--tt-content-max);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);

  --ease: var(--tt-easing);
  --ease-out: var(--tt-easing);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: var(--tt-dur-fast);
  --dur-2: var(--tt-dur);
  --dur-3: 260ms;
  --t-fast: var(--tt-dur-fast);
  --t-base: var(--tt-dur);
  --t-slow: 260ms;
}

:root[data-theme="light"] {
  --bg: var(--tt-bg);
  --sur: var(--tt-surface-2);
  --card: var(--tt-surface);
  --card2: var(--tt-surface-2);
  --bor: var(--tt-border);
  --bor2: var(--tt-border-strong);
  --txt: var(--tt-fg);
  --txt2: var(--tt-fg-2);
  --txt3: var(--tt-fg-3);
}

:root[data-theme="midnight"] {
  --tt-bg: #0A0B0D;
  --tt-surface: #111318;
  --tt-surface-2: #171A21;
  --tt-surface-3: #20242D;
  --tt-border: rgba(255, 255, 255, 0.08);
  --tt-border-strong: rgba(255, 255, 255, 0.14);
  --tt-divider: rgba(255, 255, 255, 0.08);
  --tt-fg: #F8FAFC;
  --tt-fg-2: #CBD5E1;
  --tt-fg-3: #94A3B8;
  --tt-fg-4: #64748B;
  --tt-accent: #60A5FA;
  --tt-accent-hover: #93C5FD;
  --tt-accent-press: #3B82F6;
  --tt-accent-soft: rgba(96, 165, 250, 0.14);
  --tt-accent-border: rgba(96, 165, 250, 0.30);
  --glass: rgba(10, 11, 13, 0.92);
}