/* ==========================================================================
   Empovio — Design Tokens
   The single source of truth for colour, typography, spacing, radius,
   elevation and motion. Every other stylesheet reads from these variables.
   Defined in 02_Design_System.md.
   ========================================================================== */

:root {
  /* ---------- Neutrals (the UI is 90% neutral) ---------- */
  --n-0: #ffffff;
  --n-25: #fcfcfd;
  --n-50: #f7f8fa;
  --n-100: #f1f2f5;
  --n-150: #eaecf0;
  --n-200: #e3e6eb;
  --n-300: #d2d7de;
  --n-400: #a5adbb;
  --n-500: #78818f;
  --n-600: #59616f;
  --n-700: #3e4552;
  --n-800: #262b34;
  --n-900: #13161c;

  /* ---------- Primary: deep blue ---------- */
  --primary-25: #f6f8ff;
  --primary-50: #eef3ff;
  --primary-100: #dde6ff;
  --primary-200: #c2d1ff;
  --primary-500: #3866ee;
  --primary-600: #1f4fd8;
  --primary-700: #1a41b4;
  --primary-800: #17368f;

  /* ---------- Semantic: meaning only, never decoration ---------- */
  --success-50: #ecfdf3;
  --success-100: #d1fadf;
  --success-200: #a6f4c5;
  --success-500: #12b76a;
  --success-600: #039855;
  --success-700: #027a48;

  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;

  --danger-50: #fef3f2;
  --danger-100: #fee4e2;
  --danger-200: #fecdca;
  --danger-500: #f04438;
  --danger-600: #d92d20;
  --danger-700: #b42318;

  --info-50: #eff8ff;
  --info-100: #d1e9ff;
  --info-200: #b2ddff;
  --info-500: #2e90fa;
  --info-600: #1570ef;
  --info-700: #175cd3;

  /* AI features only */
  --ai-25: #fbfaff;
  --ai-50: #f4f3ff;
  --ai-100: #ebe9fe;
  --ai-200: #d9d6fe;
  --ai-500: #7a5af8;
  --ai-600: #6938ef;
  --ai-700: #5925dc;

  /* ---------- Surface hierarchy ---------- */
  --surface-page: var(--n-50);
  --surface-alt: var(--n-100);
  --surface-card: var(--n-0);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text-primary: var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-500);
  --text-disabled: var(--n-400);

  /* ---------- Typography ---------- */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero: 56px;
  --fs-display: 48px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-wide: 0.06em;

  /* ---------- Layout ---------- */
  --container: 1440px;
  --content: 1280px;
  --gutter: 24px;
  --page-padding: 80px;

  /* ---------- Spacing: 8px scale only ---------- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;

  /* Vertical rhythm between homepage sections */
  --section-y: 96px;

  /* ---------- Radius ---------- */
  --r-button: 12px;
  --r-input: 12px;
  --r-card: 16px;
  --r-dropdown: 16px;
  --r-modal: 20px;
  --r-pill: 999px;
  --r-sm: 8px;
  --r-xs: 6px;

  /* ---------- Elevation: depth, never glow ---------- */
  --shadow-1: 0 1px 2px rgba(19, 22, 28, 0.04),
    0 1px 3px rgba(19, 22, 28, 0.06);
  --shadow-1-hover: 0 2px 4px rgba(19, 22, 28, 0.05),
    0 8px 16px -6px rgba(19, 22, 28, 0.1);
  --shadow-2: 0 4px 8px -2px rgba(19, 22, 28, 0.06),
    0 12px 24px -8px rgba(19, 22, 28, 0.1);
  --shadow-3: 0 8px 16px -4px rgba(19, 22, 28, 0.08),
    0 24px 48px -12px rgba(19, 22, 28, 0.16);

  /* ---------- Motion: never above 300ms ---------- */
  --t-micro: 140ms;
  --t-hover: 180ms;
  --t-reveal: 220ms;
  --t-modal: 220ms;
  --t-drawer: 240ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 2px var(--n-0), 0 0 0 4px var(--primary-600);
}

/* --------------------------------------------------------------------------
   Dark mode — Settings → Appearance, and only there.

   Applied via `data-theme="dark"` on `<html>`, and never by a bare
   `prefers-color-scheme` media query — that would re-theme every page on
   this origin for whoever's operating system happens to be dark, including
   an administrator who has no Appearance picker to have chosen it from.
   Appearance is D.6, an employee-only screen: `preferences.js` only ever
   sets this attribute when the signed-in caller is `ROLES.EMPLOYEE`, and
   "Match my device" is resolved in JavaScript there (`matchMedia`, with a
   listener for a live OS switch) rather than left to CSS to decide for
   everybody.

   Only the neutral ramp and the three surface tokens are redeclared. Every
   other stylesheet in the product reads colour through `--n-*`, `--surface-*`,
   `--border*` and `--text-*` — that discipline (02_Design_System.md) is what
   makes one block here enough to re-theme every employee screen without
   touching any of them, and what keeps it from reaching the admin dashboard
   at all: nothing there ever gets the attribute.

   `--surface-page/alt/card` are given their own dark values rather than
   staying `var(--n-50)` / `var(--n-100)` / `var(--n-0)` — light mode's card
   is *lighter* than its page (n-0 is whiter than n-50), and simply inverting
   the ramp number-for-number would flip that the wrong way round. Restating
   the three surfaces directly keeps "a card sits above the page" true in
   both themes. */

:root[data-theme="dark"] {
  --n-0: #0b0d11;
  --n-25: #0e1015;
  --n-50: #101216;
  --n-100: #171a20;
  --n-150: #1c1f26;
  --n-200: #262a33;
  --n-300: #333844;
  --n-400: #4b5160;
  --n-500: #7c8493;
  --n-600: #a4abb8;
  --n-700: #c1c6d0;
  --n-800: #dde0e6;
  --n-900: #f4f5f7;

  --surface-page: #0d0f13;
  --surface-alt: #14161b;
  --surface-card: #1a1d24;

  /* Semantic tints and their text. Left at their light values, a banner or
     badge stays a pale box with dark text on a dark page. The saturated
     500/600 steps are unchanged: buttons use them behind white text. */
  --success-50: #10261b;
  --success-100: #163726;
  --success-200: #1f4d36;
  --success-700: #7ee2ac;

  --warning-50: #2b2008;
  --warning-100: #3a2b0c;
  --warning-200: #55400f;
  --warning-700: #f0b866;

  --danger-50: #2d1512;
  --danger-100: #3a1613;
  --danger-200: #5a2420;
  --danger-700: #f29088;

  --info-50: #0f2036;
  --info-100: #16233d;
  --info-200: #1d3558;
  --info-700: #8fabe8;
}

/* Tablet: reduce page padding and section rhythm (02 + Part N). */
@media (max-width: 1023px) {
  :root {
    --page-padding: 40px;
    --section-y: 80px;
  }
}

/* Mobile: single column, spacing increases relative to content density. */
@media (max-width: 767px) {
  :root {
    --page-padding: 24px;
    --section-y: 64px;
  }
}