/* tokens.css — design tokens. The ONLY place raw colours live.
   Every other stylesheet uses var(--token). Light is default; dark via html[data-theme="dark"]. */
:root {
  color-scheme: light;

  /* surfaces */
  --bg: #f4f5f7;
  --bg-2: #e9ebef;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --line: #e2e5ea;
  --line-strong: #c9ced6;

  /* text */
  --ink: #12161d;
  --ink-2: #3f4753;
  --ink-3: #667080;

  /* brand + categories (one hue per career field) */
  --brand: #1d4fb8;
  --brand-ink: #ffffff;
  --c-hardware: #1d4fb8;
  --c-it: #0c7f7c;
  --c-management: #a9690c;
  --c-sales: #ad4a34;
  --c-neutral: #7b8494;
  --ok: #1a8f5a;

  /* accent follows the active focus (see base.css) */
  --accent: var(--brand);
  --accent-ink: var(--brand-ink);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 38%, var(--surface));

  /* type */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-md: 1rem;
  --fs-lg: 1.18rem;
  --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-hero: clamp(2.3rem, 1.4rem + 4.2vw, 4.4rem);
  --fs-kpi: clamp(1.55rem, 1.1rem + 1.7vw, 2.5rem);

  /* shape + depth */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(18 22 29 / 0.05), 0 4px 14px rgb(18 22 29 / 0.05);
  --shadow-2: 0 2px 6px rgb(18 22 29 / 0.07), 0 18px 44px rgb(18 22 29 / 0.12);

  /* rhythm */
  --gap: clamp(12px, 1.4vw, 20px);
  --pad: clamp(16px, 1.8vw, 26px);
  --gutter: clamp(16px, 4vw, 44px);
  --maxw: 1320px;
  --topbar-h: 60px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 320ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1014;
  --bg-2: #12161c;
  --surface: #171b22;
  --surface-2: #1d222b;
  --line: #2a303b;
  --line-strong: #3b4350;
  --ink: #eef1f5;
  --ink-2: #bcc3ce;
  --ink-3: #8b94a3;
  --brand: #7fb0ff;
  --brand-ink: #0d1014;
  --c-hardware: #7fb0ff;
  --c-it: #44c2b5;
  --c-management: #e2b04a;
  --c-sales: #ec8d76;
  --c-neutral: #8b94a3;
  --ok: #3ed598;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.35), 0 18px 44px rgb(0 0 0 / 0.5);
}

/* any element tagged with a category exposes its colour as --cat */
[data-cat="hardware"] { --cat: var(--c-hardware); }
[data-cat="it"] { --cat: var(--c-it); }
[data-cat="management"] { --cat: var(--c-management); }
[data-cat="sales"] { --cat: var(--c-sales); }
[data-cat="neutral"], [data-cat=""] { --cat: var(--c-neutral); }

html[data-focus="hardware"] { --accent: var(--c-hardware); }
html[data-focus="it"] { --accent: var(--c-it); }
html[data-focus="management"] { --accent: var(--c-management); }
html[data-focus="sales"] { --accent: var(--c-sales); }
html[data-theme="dark"] { --accent-ink: #0d1014; }