/* TaskOptic design system "Datum": tokens only.
   Cool neutral surfaces, hairline borders, one teal accent. Light is the default theme;
   theme.js sets html[data-theme="light"|"dark"]. Every text/background pair below is
   WCAG 2.2 AA in both themes (scripts/check-tokens.js asserts it).
   Canonical copy: taskoptic-web/public/assets/ds/. scripts/sync-ds.js copies this folder to
   site/assets/ds/ and taskoptic-console/public/ds/; scripts/check-frontend.js fails if they differ.
   Every colour has an --rgb-* twin ("R G B") so Tailwind can apply opacity modifiers. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-var.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Colour, light (default) */
  --rgb-bg: 245 246 247;            --color-bg: rgb(var(--rgb-bg));
  --rgb-surface: 255 255 255;       --color-surface: rgb(var(--rgb-surface));
  --rgb-surface-sunken: 236 238 240; --color-surface-sunken: rgb(var(--rgb-surface-sunken));
  --rgb-surface-raised: 255 255 255; --color-surface-raised: rgb(var(--rgb-surface-raised));
  --rgb-border: 218 222 227;        --color-border: rgb(var(--rgb-border));
  --rgb-border-strong: 124 135 146; --color-border-strong: rgb(var(--rgb-border-strong));
  --rgb-text: 18 24 32;             --color-text: rgb(var(--rgb-text));
  --rgb-text-muted: 70 81 93;       --color-text-muted: rgb(var(--rgb-text-muted));
  --rgb-text-subtle: 90 102 114;    --color-text-subtle: rgb(var(--rgb-text-subtle));
  --rgb-accent: 10 98 117;          --color-accent: rgb(var(--rgb-accent));
  --rgb-accent-hover: 8 78 94;      --color-accent-hover: rgb(var(--rgb-accent-hover));
  --rgb-accent-text: 255 255 255;   --color-accent-text: rgb(var(--rgb-accent-text));
  --rgb-accent-subtle: 225 240 243; --color-accent-subtle: rgb(var(--rgb-accent-subtle));
  --rgb-accent-border: 156 203 213; --color-accent-border: rgb(var(--rgb-accent-border));
  --color-focus: var(--color-accent);
  --rgb-success: 29 107 59;         --color-success: rgb(var(--rgb-success));
  --rgb-success-subtle: 226 241 231; --color-success-subtle: rgb(var(--rgb-success-subtle));
  --rgb-warning: 138 78 0;          --color-warning: rgb(var(--rgb-warning));
  --rgb-warning-subtle: 251 239 216; --color-warning-subtle: rgb(var(--rgb-warning-subtle));
  --rgb-danger: 180 35 24;          --color-danger: rgb(var(--rgb-danger));
  --rgb-danger-subtle: 252 232 230; --color-danger-subtle: rgb(var(--rgb-danger-subtle));
  --rgb-danger-text: 255 255 255;   --color-danger-text: rgb(var(--rgb-danger-text));
  --rgb-info: 31 90 150;            --color-info: rgb(var(--rgb-info));
  --rgb-info-subtle: 227 237 248;   --color-info-subtle: rgb(var(--rgb-info-subtle));
  --color-overlay: rgb(15 22 30 / 0.48);

  /* Chart series: each >= 3:1 against surface */
  --color-chart-1: #0A6275; --color-chart-2: #C2410C; --color-chart-3: #5B4BB7;
  --color-chart-4: #2E7D32; --color-chart-5: #9A6B00; --color-chart-6: #B0306A;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-stretch: 112%;
  --text-xs: 0.75rem;   --text-sm: 0.875rem; --text-base: 1rem;   --text-md: 1.125rem;
  --text-lg: 1.25rem;   --text-xl: 1.5rem;   --text-2xl: 1.875rem; --text-3xl: 2.375rem;
  --text-4xl: 3.25rem;  --text-5xl: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.55;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-tight: -0.015em; --tracking-wide: 0.06em;

  /* Space (4px base) */
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Shape */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 999px;
  --border-width: 1px;

  /* Depth: only for things that float */
  --shadow-sm: 0 1px 2px rgb(16 24 32 / 0.06);
  --shadow-md: 0 4px 12px rgb(16 24 32 / 0.08), 0 1px 2px rgb(16 24 32 / 0.06);
  --shadow-lg: 0 16px 40px rgb(16 24 32 / 0.14), 0 2px 6px rgb(16 24 32 / 0.06);
  --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);

  /* Motion */
  --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --carousel-interval: 7000ms;

  /* Controls and layout */
  --control-h-sm: 2rem; --control-h-md: 2.5rem; --control-h-lg: 3rem; --touch-min: 2.75rem;
  --topbar-h: 3.5rem; --sidebar-w: 15.5rem; --rail-w: 3.5rem; --copilot-w: 22.5rem;
  --content-max: 80rem; --prose-max: 42rem; --site-max: 74rem;

  /* Layers, aligned to Bootstrap's scale on purpose (legacy pages coexist) */
  --z-base: 0; --z-raised: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-sidebar: 1030;
  --z-overlay: 1040; --z-modal: 1050; --z-popover: 1070; --z-tooltip: 1080; --z-toast: 1090;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --rgb-bg: 13 17 21;
  --rgb-surface: 20 26 31;
  --rgb-surface-sunken: 9 12 15;
  --rgb-surface-raised: 27 34 40;
  --rgb-border: 41 50 58;
  --rgb-border-strong: 107 118 129;
  --rgb-text: 231 235 238;
  --rgb-text-muted: 170 180 190;
  --rgb-text-subtle: 140 151 162;
  --rgb-accent: 91 192 211;
  --rgb-accent-hover: 128 208 223;
  --rgb-accent-text: 4 35 43;
  --rgb-accent-subtle: 14 53 64;
  --rgb-accent-border: 31 94 107;
  --rgb-success: 108 203 139;
  --rgb-success-subtle: 18 48 30;
  --rgb-warning: 239 179 90;
  --rgb-warning-subtle: 53 39 15;
  --rgb-danger: 244 140 125;
  --rgb-danger-subtle: 58 26 22;
  --rgb-danger-text: 26 11 9;
  --rgb-info: 141 183 238;
  --rgb-info-subtle: 19 38 59;
  --color-overlay: rgb(0 0 0 / 0.64);
  --color-chart-1: #5BC0D3; --color-chart-2: #F59E5B; --color-chart-3: #A99BF0;
  --color-chart-4: #7ACB7E; --color-chart-5: #E3C15A; --color-chart-6: #F08DB8;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}