/* Tokens: every custom property, the font, light + dark values (Editorial-Tech Dashboard system, §3).
   One accent (saffron, hue ~70, the colour of the NOW line). Four text tiers. Categories are muted series colours. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
  --maxw: 1680px;
  --topbar-h: 60px;
  --side-w: 248px;
  --side-rail: 72px;
  --row-h: 46px;

  /* surfaces */
  --bg: oklch(0.972 0.005 95); --bg-2: oklch(0.945 0.007 95);
  --surface: oklch(0.993 0.003 95); --surface-2: oklch(0.962 0.006 95); --surface-3: oklch(0.922 0.009 95);
  --line: oklch(0.25 0.03 265 / .09); --line-2: oklch(0.25 0.03 265 / .17);

  /* text: four tiers */
  --ink: oklch(0.2 0.03 265);
  --ink-2: oklch(0.37 0.025 265);
  --muted: oklch(0.49 0.022 265);
  --faint: oklch(0.62 0.02 265);

  /* the one accent */
  --accent: oklch(0.8 0.16 70);
  --accent-hover: oklch(0.84 0.16 74);
  --on-accent: oklch(0.2 0.04 265);
  --accent-text: oklch(0.5 0.13 58);
  --accent-soft: color-mix(in oklch, var(--accent) 24%, transparent);

  --focus: oklch(0.2 0.03 265);
  --glass: oklch(0.985 0.004 95 / .74);
  --scrim: oklch(0.2 0.03 265 / .38);

  /* status: semantic only */
  --good: oklch(0.45 0.11 165); --good-bg: oklch(0.93 0.05 165); --good-row: oklch(0.955 0.03 165);
  --warn: oklch(0.47 0.11 70); --warn-bg: oklch(0.94 0.06 85);
  --crit: oklch(0.49 0.17 25); --crit-bg: oklch(0.94 0.04 25);
  --info: oklch(0.46 0.12 250); --info-bg: oklch(0.94 0.03 250);

  --heat-off: oklch(0.92 0.008 265); --track: oklch(0.25 0.03 265 / .09);

  /* categories: muted, never used for chrome */
  --cat-sales: oklch(0.6 0.12 150);
  --cat-marketing: oklch(0.62 0.13 350);
  --cat-finance: oklch(0.66 0.12 85);
  --cat-development: oklch(0.58 0.13 255);
  --cat-operations: oklch(0.6 0.1 205);
  --cat-product: oklch(0.58 0.13 300);
  --cat-legal: oklch(0.6 0.1 115);
  --cat-team: oklch(0.64 0.13 45);
  --cat-security: oklch(0.58 0.15 22);
  --cat-strategy: oklch(0.55 0.04 265);

  --sh-1: 0 1px 0 oklch(1 0 0 / .7) inset, 0 1px 2px oklch(0.2 0.03 265 / .05), 0 14px 34px -22px oklch(0.2 0.03 265 / .22);
  --sh-2: 0 1px 0 oklch(1 0 0 / .7) inset, 0 2px 4px oklch(0.2 0.03 265 / .06), 0 28px 56px -24px oklch(0.2 0.03 265 / .34);
  --sheen: linear-gradient(180deg, oklch(1 0 0 / .55), transparent 38%);
  --grain-op: .045;
  --mesh-1: oklch(0.8 0.16 70 / .16);
  --mesh-2: oklch(0.62 0.13 255 / .1);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.077 22%,
    1.121 24.3%, 1.149 26.1%, 1.159 28%, 1.163 30.1%, 1.161 32.1%, 1.154 34.4%, 1.129 38.8%, 1.051 45.5%,
    1.017 49.1%, 0.991 52.3%, 0.977 55.7%, 0.974 60%, 0.975 63.2%, 0.997 73.8%, 1.003 80.6%, 1.004 85.5%, 1);
  --spring-soft: linear(0, 0.012, 0.047 3.1%, 0.183 6.4%, 0.383 10.1%, 0.604 14.4%, 0.79 19%, 0.912 23.6%, 0.984 28.4%,
    1.022 33.4%, 1.036 38.6%, 1.035 44.6%, 1.022 52.1%, 1.008 61.5%, 1.001 73.2%, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: oklch(0.145 0.016 265); --bg-2: oklch(0.125 0.015 265);
    --surface: oklch(0.185 0.018 265); --surface-2: oklch(0.215 0.02 265); --surface-3: oklch(0.255 0.022 265);
    --line: oklch(1 0 0 / .07); --line-2: oklch(1 0 0 / .14);
    --ink: oklch(0.965 0.006 95); --ink-2: oklch(0.85 0.012 265); --muted: oklch(0.7 0.018 265); --faint: oklch(0.55 0.02 265);
    --accent: oklch(0.82 0.16 74); --accent-hover: oklch(0.87 0.15 80); --on-accent: oklch(0.2 0.04 265);
    --accent-text: oklch(0.84 0.15 78); --accent-soft: color-mix(in oklch, var(--accent) 18%, transparent);
    --focus: oklch(0.965 0.006 95);
    --glass: oklch(0.16 0.017 265 / .72); --scrim: oklch(0.08 0.02 265 / .6);
    --good: oklch(0.8 0.13 160); --good-bg: oklch(0.3 0.06 165); --good-row: oklch(0.2 0.03 165);
    --warn: oklch(0.83 0.13 80); --warn-bg: oklch(0.32 0.06 75);
    --crit: oklch(0.75 0.15 25); --crit-bg: oklch(0.3 0.07 25);
    --info: oklch(0.78 0.11 250); --info-bg: oklch(0.3 0.06 250);
    --heat-off: oklch(0.24 0.015 265); --track: oklch(1 0 0 / .08);
    --cat-sales: oklch(0.72 0.12 150); --cat-marketing: oklch(0.72 0.12 350); --cat-finance: oklch(0.78 0.12 85);
    --cat-development: oklch(0.7 0.12 255); --cat-operations: oklch(0.72 0.1 205); --cat-product: oklch(0.7 0.12 300);
    --cat-legal: oklch(0.72 0.1 115); --cat-team: oklch(0.75 0.12 45); --cat-security: oklch(0.7 0.14 22);
    --cat-strategy: oklch(0.68 0.04 265);
    --sh-1: 0 1px 0 oklch(1 0 0 / .04) inset, 0 1px 2px oklch(0 0 0 / .3), 0 14px 34px -22px oklch(0 0 0 / .7);
    --sh-2: 0 1px 0 oklch(1 0 0 / .05) inset, 0 2px 4px oklch(0 0 0 / .35), 0 28px 56px -24px oklch(0 0 0 / .8);
    --sheen: linear-gradient(180deg, oklch(1 0 0 / .045), transparent 38%);
    --grain-op: .07;
    --mesh-1: oklch(0.82 0.16 74 / .1);
    --mesh-2: oklch(0.6 0.13 255 / .1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.145 0.016 265); --bg-2: oklch(0.125 0.015 265);
  --surface: oklch(0.185 0.018 265); --surface-2: oklch(0.215 0.02 265); --surface-3: oklch(0.255 0.022 265);
  --line: oklch(1 0 0 / .07); --line-2: oklch(1 0 0 / .14);
  --ink: oklch(0.965 0.006 95); --ink-2: oklch(0.85 0.012 265); --muted: oklch(0.7 0.018 265); --faint: oklch(0.55 0.02 265);
  --accent: oklch(0.82 0.16 74); --accent-hover: oklch(0.87 0.15 80); --on-accent: oklch(0.2 0.04 265);
  --accent-text: oklch(0.84 0.15 78); --accent-soft: color-mix(in oklch, var(--accent) 18%, transparent);
  --focus: oklch(0.965 0.006 95);
  --glass: oklch(0.16 0.017 265 / .72); --scrim: oklch(0.08 0.02 265 / .6);
  --good: oklch(0.8 0.13 160); --good-bg: oklch(0.3 0.06 165); --good-row: oklch(0.2 0.03 165);
  --warn: oklch(0.83 0.13 80); --warn-bg: oklch(0.32 0.06 75);
  --crit: oklch(0.75 0.15 25); --crit-bg: oklch(0.3 0.07 25);
  --info: oklch(0.78 0.11 250); --info-bg: oklch(0.3 0.06 250);
  --heat-off: oklch(0.24 0.015 265); --track: oklch(1 0 0 / .08);
  --cat-sales: oklch(0.72 0.12 150); --cat-marketing: oklch(0.72 0.12 350); --cat-finance: oklch(0.78 0.12 85);
  --cat-development: oklch(0.7 0.12 255); --cat-operations: oklch(0.72 0.1 205); --cat-product: oklch(0.7 0.12 300);
  --cat-legal: oklch(0.72 0.1 115); --cat-team: oklch(0.75 0.12 45); --cat-security: oklch(0.7 0.14 22);
  --cat-strategy: oklch(0.68 0.04 265);
  --sh-1: 0 1px 0 oklch(1 0 0 / .04) inset, 0 1px 2px oklch(0 0 0 / .3), 0 14px 34px -22px oklch(0 0 0 / .7);
  --sh-2: 0 1px 0 oklch(1 0 0 / .05) inset, 0 2px 4px oklch(0 0 0 / .35), 0 28px 56px -24px oklch(0 0 0 / .8);
  --sheen: linear-gradient(180deg, oklch(1 0 0 / .045), transparent 38%);
  --grain-op: .07;
  --mesh-1: oklch(0.82 0.16 74 / .1);
  --mesh-2: oklch(0.6 0.13 255 / .1);
}