/*
  ProTrack Design System v1 — tokens.css
  Generated from tokens.json. Themes: cool (default), graphite, warm.
  Apply with <html data-theme="cool|graphite|warm">. Any element may also carry
  data-theme to scope a theme locally (theme previews, the switcher).
  Selector shape `:root[data-theme="x"]` is kept so scripts/check-contrast.mjs reads it.
*/

:root {
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-numeric: 'tnum' 1, 'zero' 0;
  --text-2xs: 0.6875rem; /* 11px · overlines, table headers, chip counters */
  --text-xs: 0.75rem; /* 12px · meta lines, captions, helper text */
  --text-sm: 0.8125rem; /* 13px · table cells, secondary body, chips */
  --text-base: 0.875rem; /* 14px · body, buttons, inputs */
  --text-md: 1rem; /* 16px · emphasised body, card titles */
  --text-lg: 1.125rem; /* 18px · panel / section headings */
  --text-xl: 1.5rem; /* 24px · page headings, mobile screen titles */
  --text-2xl: 1.875rem; /* 30px · screen titles (greeting) */
  --text-3xl: 2.125rem; /* 34px · KPI figures (Geist Mono) */
  --leading-2xs: 1.35;
  --leading-xs: 1.4;
  --leading-sm: 1.45;
  --leading-base: 1.5;
  --leading-md: 1.45;
  --leading-lg: 1.35;
  --leading-xl: 1.2;
  --leading-2xl: 1.12;
  --leading-3xl: 1.0;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 700; /* Instrument Sans tops out at 700; kept for compatibility */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-figures: -0.03em;
  --tracking-overline: 0.08em;
  --space-0: 0px;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 6px; /* chips, kbd, small tags */
  --radius-sm: 9px; /* checkboxes, nav items, segmented items */
  --radius-md: 12px; /* buttons, inputs, list rows */
  --radius-lg: 18px; /* cards, panels, KPI cards */
  --radius-xl: 24px; /* modals, sheets, phone cards */
  --radius-pill: 999px; /* badges, avatars, toggles */
  --blur-glass: 24px; /* panels, sidebar, top bar (desktop only) */
  --blur-overlay: 10px; /* modal scrim */
  --blur-none: 0px; /* mobile bars, reduced transparency */
  --glass-saturate: 140%;
  --motion-fast: 140ms; /* press feedback, hover */
  --motion-base: 240ms; /* tabs, panels, popovers */
  --motion-slow: 380ms; /* sheets, modals, toasts */
  --motion-theme: 200ms; /* theme cross-fade (colour props only) */
  --motion: var(--motion-base); /* legacy name */
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-subnav: 150;
  --z-nav: 200;
  --z-floating: 250;
  --z-popover: 280;
  --z-overlay: 300;
  --z-toast: 400;
  --sidebar-width: 236px;
  --app-header-height: 82px;
  --content-max: 1600px;
  --gutter: 20px;
  --mobile-breakpoint: 760px;
}

/* Cool White — Default light theme · primary brand look */
:root, [data-theme="cool"], :root[data-theme="cool"] {
  color-scheme: light;
  /* surface */
  --background: #EBEEF3;
  --bg-image: radial-gradient(900px 560px at 40% -16%, rgba(120,140,165,.14), transparent 64%), radial-gradient(820px 620px at 100% 110%, rgba(170,182,198,.40), transparent 66%), radial-gradient(700px 520px at -6% 104%, rgba(255,255,255,.8), transparent 70%), linear-gradient(165deg, #F5F7FA 0%, #EAEEF3 52%, #DFE4EB 100%);
  --surface: #F8F9FB;
  --surface-raised: #FFFFFF;
  --surface-subtle: #F0F2F6;
  --surface-hover: #E8ECF1;
  --surface-sunken: #E4E8EE;
  --surface-inverse: #1B2230;
  /* glass */
  --glass: rgba(255,255,255,.62);
  --glass-strong: rgba(255,255,255,.80);
  --glass-subtle: rgba(30,41,59,.03);
  --glass-border: rgba(30,41,59,.10);
  --glass-highlight: rgba(255,255,255,1);
  /* text */
  --text: #1B2230;
  --text-strong: #0F1520;
  --muted: #4A5363;
  --subtle: #59626F;
  --text-inverse: #F4F5F7;
  --text-disabled: #8B93A0;
  /* brand */
  --brand: #536A84;
  --brand-hover: #455B74;
  --brand-pressed: #3A4E64;
  --brand-contrast: #FFFFFF;
  --brand-ink: #455B74;
  --brand-soft: #E3E9F0;
  --brand-glow: rgba(83,106,132,.35);
  /* border */
  --border: #DCE1E8;
  --border-strong: #C3CAD4;
  --border-input: #7A8494;
  /* focus */
  --focus-outline: #3B5D86;
  --focus-ring: rgba(59,93,134,.28);
  --overlay: rgba(27,34,48,.40);
  /* status */
  --success: #04724F;
  --success-soft: #E1F3EA;
  --success-contrast: #FFFFFF;
  --warning: #8A4B08;
  --warning-soft: #FBEED6;
  --warning-contrast: #FFFFFF;
  --danger: #B42318;
  --danger-soft: #FCE8E6;
  --danger-contrast: #FFFFFF;
  --info: #1E4E79;
  --info-soft: #E2ECF7;
  --info-contrast: #FFFFFF;
  --violet: #5B21B6;
  --violet-soft: #EEE8FB;
  --neutral: #334155;
  --neutral-soft: #E8ECF1;
  /* tier */
  --tier-basic-fg: #3F4856;
  --tier-basic-bg: #EDF0F4;
  --tier-basic-border: #C3CAD4;
  --tier-gold-fg: #6B4300;
  --tier-gold-bg: linear-gradient(135deg, #FFF6DC 0%, #F5DE9B 100%);
  --tier-gold-flat: #F9EAC0;
  --tier-gold-border: #D9B45A;
  --tier-platinum-fg: #363B57;
  --tier-platinum-bg: linear-gradient(135deg, #F7F8FC 0%, #D9DEEC 100%);
  --tier-platinum-flat: #E6E9F2;
  --tier-platinum-border: #AEB5CB;
  /* data */
  --chart-1: #536A84;
  --chart-2: #8EA2B8;
  --chart-track: rgba(30,41,59,.07);
  --avatar-1: #C7D2FE;
  --avatar-2: #FDE68A;
  --avatar-3: #B8C6D6;
  --avatar-4: #BFE6D3;
  --avatar-ink: #14181F;
  /* logo */
  --logo-tile: #536A84;
  --logo-glyph: #FFFFFF;
  --logo-dot: #C9D6E3;
  --logo-word: #1B2230;
  --supergraphic: rgba(124,138,156,.11);
  /* shadow */
  --shadow: 0 1px 2px rgba(30,41,59,.06), 0 18px 40px -24px rgba(30,41,59,.18);
  --shadow-strong: 0 2px 6px rgba(30,41,59,.06), 0 24px 56px -26px rgba(30,41,59,.26);
  --shadow-overlay: 0 30px 80px -20px rgba(15,21,32,.35), 0 8px 20px -10px rgba(15,21,32,.18);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(30,41,59,.06), 0 18px 40px -24px rgba(30,41,59,.18);
  --shadow-brand: 0 10px 22px -12px rgba(83,106,132,.55), inset 0 1px 0 rgba(255,255,255,.25);
  --shadow-focus: 0 0 0 4px rgba(59,93,134,.28);
  --shadow-inset: inset 0 1px 2px rgba(30,41,59,.08);
  --nav-glass: var(--glass-strong);
  --page-glass: var(--glass);
}

/* Graphite — Dark theme · core brand language */
[data-theme="graphite"], :root[data-theme="graphite"] {
  color-scheme: dark;
  /* surface */
  --background: #32353B;
  --bg-image: radial-gradient(900px 560px at 42% -16%, rgba(140,150,165,.26), transparent 64%), radial-gradient(820px 620px at 100% 110%, rgba(110,116,128,.32), transparent 66%), linear-gradient(165deg, #3C4047 0%, #32353B 50%, #2A2D32 100%);
  --surface: #3A3D43;
  --surface-raised: #43464D;
  --surface-subtle: #383B41;
  --surface-hover: #484C53;
  --surface-sunken: #2C2F34;
  --surface-inverse: #F4F5F7;
  /* glass */
  --glass: rgba(255,255,255,.06);
  --glass-strong: rgba(255,255,255,.10);
  --glass-subtle: rgba(0,0,0,.10);
  --glass-border: rgba(255,255,255,.12);
  --glass-highlight: rgba(255,255,255,.10);
  /* text */
  --text: #F4F5F7;
  --text-strong: #FFFFFF;
  --muted: #D9DBDF;
  --subtle: #C8CBD0;
  --text-inverse: #1B1D21;
  --text-disabled: #8C9097;
  /* brand */
  --brand: #8AB4F8;
  --brand-hover: #A3C4FA;
  --brand-pressed: #749FE6;
  --brand-contrast: #0F1D33;
  --brand-ink: #BBD3FB;
  --brand-soft: #3E4A5E;
  --brand-glow: rgba(138,180,248,.40);
  /* border */
  --border: #4A4E56;
  --border-strong: #5B6068;
  --border-input: #969BA4;
  /* focus */
  --focus-outline: #BBD3FB;
  --focus-ring: rgba(138,180,248,.35);
  --overlay: rgba(12,13,15,.55);
  /* status */
  --success: #A7F3C4;
  --success-soft: #3A4A43;
  --success-contrast: #14181F;
  --warning: #FDE3AE;
  --warning-soft: #4D473B;
  --warning-contrast: #14181F;
  --danger: #FFC4C4;
  --danger-soft: #523F42;
  --danger-contrast: #14181F;
  --info: #CFE0FD;
  --info-soft: #3E4A5E;
  --info-contrast: #14181F;
  --violet: #E2D8FF;
  --violet-soft: #47435A;
  --neutral: #EEF0F3;
  --neutral-soft: #474A51;
  /* tier */
  --tier-basic-fg: #E3E5E8;
  --tier-basic-bg: #43464D;
  --tier-basic-border: #62666E;
  --tier-gold-fg: #FFE9BE;
  --tier-gold-bg: linear-gradient(135deg, rgba(253,227,174,.15) 0%, rgba(253,227,174,.05) 100%);
  --tier-gold-flat: #4D483C;
  --tier-gold-border: rgba(253,227,174,.45);
  --tier-platinum-fg: #EEF0FA;
  --tier-platinum-bg: linear-gradient(135deg, rgba(230,233,247,.15) 0%, rgba(230,233,247,.05) 100%);
  --tier-platinum-flat: #4A4C55;
  --tier-platinum-border: rgba(230,233,247,.42);
  /* data */
  --chart-1: #6E9EEB;
  --chart-2: #A8C7FA;
  --chart-track: rgba(255,255,255,.10);
  --avatar-1: #C7D2FE;
  --avatar-2: #FDE68A;
  --avatar-3: #8AB4F8;
  --avatar-4: #A7F3C4;
  --avatar-ink: #14181F;
  /* logo */
  --logo-tile: #8AB4F8;
  --logo-glyph: #0F1D33;
  --logo-dot: #FFFFFF;
  --logo-word: #FFFFFF;
  --supergraphic: rgba(229,231,235,.05);
  /* shadow */
  --shadow: 0 1px 2px rgba(0,0,0,.10), 0 20px 44px -26px rgba(0,0,0,.45);
  --shadow-strong: 0 2px 6px rgba(0,0,0,.14), 0 26px 60px -28px rgba(0,0,0,.55);
  --shadow-overlay: 0 30px 80px -20px rgba(0,0,0,.60), 0 8px 20px -10px rgba(0,0,0,.35);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.10), 0 20px 44px -26px rgba(0,0,0,.45);
  --shadow-brand: 0 10px 22px -12px rgba(138,180,248,.55), inset 0 1px 0 rgba(255,255,255,.35);
  --shadow-focus: 0 0 0 4px rgba(138,180,248,.35);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.25);
  --nav-glass: var(--glass-strong);
  --page-glass: var(--glass);
}

/* Warm Light — Optional third theme */
[data-theme="warm"], :root[data-theme="warm"] {
  color-scheme: light;
  /* surface */
  --background: #E9E5DF;
  --bg-image: radial-gradient(900px 560px at 40% -16%, rgba(56,189,248,.12), transparent 64%), radial-gradient(820px 620px at 100% 110%, rgba(190,176,160,.42), transparent 66%), radial-gradient(700px 520px at -6% 104%, rgba(255,255,255,.7), transparent 70%), linear-gradient(165deg, #F4F1EC 0%, #EAE6E0 52%, #E0DBD3 100%);
  --surface: #F8F6F3;
  --surface-raised: #FFFFFF;
  --surface-subtle: #F1EEE9;
  --surface-hover: #EBE7E1;
  --surface-sunken: #E3DED7;
  --surface-inverse: #1F1D1A;
  /* glass */
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.74);
  --glass-subtle: rgba(60,50,40,.03);
  --glass-border: rgba(60,50,40,.10);
  --glass-highlight: rgba(255,255,255,.95);
  /* text */
  --text: #1F1D1A;
  --text-strong: #12100E;
  --muted: #504C47;
  --subtle: #5B5650;
  --text-inverse: #F7F5F2;
  --text-disabled: #99938B;
  /* brand */
  --brand: #38BDF8;
  --brand-hover: #5CCBFA;
  --brand-pressed: #22A8E6;
  --brand-contrast: #0B1530;
  --brand-ink: #035E91;
  --brand-soft: #E0F2FE;
  --brand-glow: rgba(14,165,233,.35);
  /* border */
  --border: #DDD8D0;
  --border-strong: #C9C2B8;
  --border-input: #857F76;
  /* focus */
  --focus-outline: #0369A1;
  --focus-ring: rgba(3,105,161,.25);
  --overlay: rgba(31,29,26,.40);
  /* status */
  --success: #04724F;
  --success-soft: #E1F2E9;
  --success-contrast: #FFFFFF;
  --warning: #8A4B08;
  --warning-soft: #FAEBD3;
  --warning-contrast: #FFFFFF;
  --danger: #B42318;
  --danger-soft: #FBE6E3;
  --danger-contrast: #FFFFFF;
  --info: #075985;
  --info-soft: #DFF0FA;
  --info-contrast: #FFFFFF;
  --violet: #5B21B6;
  --violet-soft: #EDE6F8;
  --neutral: #3F3B36;
  --neutral-soft: #ECE8E2;
  /* tier */
  --tier-basic-fg: #46423D;
  --tier-basic-bg: #F0EDE8;
  --tier-basic-border: #C9C2B8;
  --tier-gold-fg: #6B4300;
  --tier-gold-bg: linear-gradient(135deg, #FFF6DC 0%, #F5DE9B 100%);
  --tier-gold-flat: #F9EAC0;
  --tier-gold-border: #D9B45A;
  --tier-platinum-fg: #363B57;
  --tier-platinum-bg: linear-gradient(135deg, #F7F8FC 0%, #D9DEEC 100%);
  --tier-platinum-flat: #E6E9F2;
  --tier-platinum-border: #AEB5CB;
  /* data */
  --chart-1: #0284C7;
  --chart-2: #38BDF8;
  --chart-track: rgba(60,50,40,.07);
  --avatar-1: #C7D2FE;
  --avatar-2: #FDE68A;
  --avatar-3: #38BDF8;
  --avatar-4: #BFE6D3;
  --avatar-ink: #14181F;
  /* logo */
  --logo-tile: #38BDF8;
  --logo-glyph: #0B1530;
  --logo-dot: #FFFFFF;
  --logo-word: #1F1D1A;
  --supergraphic: rgba(138,130,120,.11);
  /* shadow */
  --shadow: 0 1px 2px rgba(70,56,40,.06), 0 18px 40px -24px rgba(70,56,40,.18);
  --shadow-strong: 0 2px 6px rgba(70,56,40,.06), 0 24px 56px -26px rgba(70,56,40,.26);
  --shadow-overlay: 0 30px 80px -20px rgba(31,29,26,.35), 0 8px 20px -10px rgba(31,29,26,.18);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(70,56,40,.06), 0 18px 40px -24px rgba(70,56,40,.18);
  --shadow-brand: 0 10px 22px -12px rgba(14,165,233,.55), inset 0 1px 0 rgba(255,255,255,.35);
  --shadow-focus: 0 0 0 4px rgba(3,105,161,.25);
  --shadow-inset: inset 0 1px 2px rgba(70,56,40,.08);
  --nav-glass: var(--glass-strong);
  --page-glass: var(--glass);
}

/* Derived shadows: declared on every theme scope so var() resolves against the local theme. */
:root, [data-theme] { --shadow-ring: 0 0 0 2px var(--surface-raised); --shadow-flag: inset 3px 0 0 var(--danger); --shadow-selected: inset 3px 0 0 var(--brand-ink); }

/* Reduced transparency: glass becomes the flat surface (user setting or OS). */
[data-transparency="reduced"][data-theme], [data-transparency="reduced"] [data-theme] { --glass: var(--surface); --glass-strong: var(--surface); --glass-subtle: var(--surface-subtle); --blur-glass: 0px; }
@media (prefers-reduced-transparency: reduce) { :root[data-theme], [data-theme] { --glass: var(--surface); --glass-strong: var(--surface); --glass-subtle: var(--surface-subtle); --blur-glass: 0px; } }
/* Phones: pinned bars are solid (repo rule, app/theme-system.css). */
@media (max-width: 760px) { :root { --blur-glass: 0px; } }
@media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-theme: 0ms; } }