/* ============================================================================
   OBLQAI Workspace — tokens.css
   Design language v1.1 — "modern command" (§6, 2026-07-24). Supersedes v1.0.
   Light + dark, day one. ONE hand-written file, custom properties, no build.

   NO MOTION: zero `animation:` and zero `transition:` properties are authored
   anywhere in this file. The only occurrence of those words is §7.1's global
   kill switch at the bottom. Shadows here are static paint, never animated.

   ---------------------------------------------------------------------------
   WCAG AA CONTRAST CHECK   (4.5:1 text · 3:1 UI/large · computed sRGB)
   ---------------------------------------------------------------------------
   LIGHT — against --bg #F6F7F9 unless noted            ratio   need   pass
   --text        #16181D                                16.6:1   4.5   AAA
   --text        #16181D  on --surface #FFFFFF          17.8:1   4.5   AAA
   --text        #16181D  on --surface-2 #F0F1F4        15.9:1   4.5   AAA
   --text-2      #667085                                 4.7:1   4.5   AA
   --text-2      #667085  on --surface #FFFFFF           5.0:1   4.5   AA
   --accent      #CC785C                                 3.1:1   3.0   AA  UI ONLY (rings, dots, borders, icon chips)
   --accent-text #A85B42  (link + accent-button label)   4.6:1   4.5   AA  [derived — see design-notes]
   --accent-ink  #FFFFFF  on --accent-text #A85B42       4.9:1   4.5   AA
   --ink         #16181D  fill, --on-ink #FFFFFF on it  17.8:1   4.5   AAA
   --ok          #1F8A5B                                 4.1:1   3.0   AA  UI ONLY (dot, chip border, icon)
   --ok-text     #17704A  (numerals, deltas, labels)     5.7:1   4.5   AA  [derived]
   --warn        #B45309                                 4.7:1   4.5   AA
   --danger      #C03E32                                 4.9:1   4.5   AA
   --info        #4E6FDB                                 4.2:1   3.0   AA  UI ONLY
   --info-text   #3F5CC4                                 5.5:1   4.5   AA  [derived]
   --viz-1       #CC785C  chart mark on --surface        3.3:1   3.0   AA  mark
   --viz-2       #5E6AD2  chart mark on --surface        4.7:1   4.5   AA  mark + label
   --text on --accent-soft / --ok-soft / --warn-soft / --danger-soft / --info-soft  >14:1  AAA
   Semantic *-text colors on their own *-soft tint: 4.5:1–5.4:1  AA

   DARK — against --bg #101114 unless noted             ratio   need   pass
   --text        #F1F2F4                                16.8:1   4.5   AAA
   --text        #F1F2F4  on --surface #17181C          15.6:1   4.5   AAA
   --text-2      #9BA1AC                                 7.3:1   4.5   AAA
   --accent      #E08A6D   (links + UI, no split)        7.2:1   4.5   AAA
   --accent-ink  #101114  on --accent #E08A6D            7.2:1   4.5   AAA
   --ink         #F1F2F4  fill, --on-ink #101114 on it  16.8:1   4.5   AAA
   --ok          #5BC28E                                 8.3:1   4.5   AAA
   --warn        #E3A857                                 8.4:1   4.5   AAA
   --danger      #EC8074                                 7.0:1   4.5   AA
   --info        #93A8ED                                 7.6:1   4.5   AAA
   --viz-2       #8B94E8                                 6.9:1   4.5   AA

   Hairlines (--border #E7E9EE / #2A2D33) are decorative separators, exempt
   under WCAG 1.4.11. Where a boundary carries meaning on its own — input
   outline, focus ring, selected pill — --border-strong or --accent is used,
   both ≥3:1 against their background.
   ========================================================================= */

/* --- fonts — self-hosted only, no CDN, no external request ---------------- */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: block; /* block, not swap — a swap is a visible motion event */
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono[wght].woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: block;
}

:root {
  /* colour — light (§6.2) */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F0F1F4;
  --border: #E7E9EE;
  --border-strong: #CBD0DA;      /* meaning-bearing outlines: inputs, selected */
  --text: #16181D;
  --text-2: #667085;
  --text-3: #98A0AE;             /* disabled labels only, never body copy */

  --accent: #CC785C;
  --accent-text: #A85B42;        /* AA-safe coral for link text + accent fills */
  --accent-soft: #F9EDE7;
  --accent-ink: #FFFFFF;

  --ink: #16181D;                /* decisive buttons — Approve */
  --on-ink: #FFFFFF;

  --ok: #1F8A5B;
  --ok-text: #17704A;
  --ok-soft: #E9F6EF;
  --warn: #B45309;
  --warn-text: #B45309;
  --warn-soft: #FBF1E5;
  --danger: #C03E32;
  --danger-text: #C03E32;
  --danger-soft: #FBEBE9;
  --info: #4E6FDB;
  --info-text: #3F5CC4;
  --info-soft: #ECF0FC;

  --viz-1: #CC785C;              /* Team / human series */
  --viz-2: #5E6AD2;              /* Claude / agent series — charts only */

  /* type (§6.3) */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-label: 11px;              /* small-caps section labels, +6% tracking */
  --fs-caption: 12px;
  --fs-secondary: 13px;
  --fs-body: 14px;               /* app default */
  --fs-doc: 16px;
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-display: 28px;            /* greeting, KPI numerals — 32 at the top end */
  --fs-display-lg: 32px;
  --lh-body: 1.5;
  --lh-heading: 1.3;
  --lh-display: 1.1;
  --lh-doc: 1.6;
  --ls-label: 0.06em;
  --fw-body: 400;
  --fw-label: 500;
  --fw-heading: 600;

  /* space — 8pt grid, 4 for chip padding (§6.4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;                   /* card padding low end / grid gap */
  --s-6: 24px;                   /* card padding high end */
  --s-7: 32px;                   /* canvas page padding */
  --s-8: 48px;

  /* shape */
  --r-card: 12px;
  --r-control: 8px;              /* buttons, inputs, icon chips */
  --r-pill: 999px;               /* chips, badges, segmented track */
  --r-shell: 0;

  /* depth — soft static elevation on the gray canvas (§6.4) */
  --elev-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px rgb(16 24 40 / 0.06);
  --elev-overlay: 0 12px 32px rgb(16 24 40 / 0.12);

  /* shell metrics (§6.5) */
  --topbar-h: 56px;
  --rail-w: 248px;
  --rightpane-w: 380px;
  --icon-chip: 36px;
  --row-h: 36px;
  --row-h-compact: 32px;
  --doc-measure: 72ch;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101114;
    --surface: #17181C;
    --surface-2: #1F2126;
    --border: #2A2D33;
    --border-strong: #3E434C;
    --text: #F1F2F4;
    --text-2: #9BA1AC;
    --text-3: #6C7280;

    --accent: #E08A6D;
    --accent-text: #E08A6D;      /* already ≥4.5:1 on dark — no split needed */
    --accent-soft: #3A2A22;
    --accent-ink: #101114;

    --ink: #F1F2F4;
    --on-ink: #101114;

    --ok: #5BC28E;
    --ok-text: #5BC28E;
    --ok-soft: #173327;
    --warn: #E3A857;
    --warn-text: #E3A857;
    --warn-soft: #38301D;
    --danger: #EC8074;
    --danger-text: #EC8074;
    --danger-soft: #3A211E;
    --info: #93A8ED;
    --info-text: #93A8ED;
    --info-soft: #20263B;

    --viz-1: #E08A6D;
    --viz-2: #8B94E8;

    /* dark: shadows nearly invisible — borders and surface steps carry depth */
    --elev-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 8px 24px rgb(0 0 0 / 0.24);
    --elev-overlay: 0 12px 32px rgb(0 0 0 / 0.48);
  }
}

[data-theme="dark"] {
  --bg: #101114;
  --surface: #17181C;
  --surface-2: #1F2126;
  --border: #2A2D33;
  --border-strong: #3E434C;
  --text: #F1F2F4;
  --text-2: #9BA1AC;
  --text-3: #6C7280;

  --accent: #E08A6D;
  --accent-text: #E08A6D;
  --accent-soft: #3A2A22;
  --accent-ink: #101114;

  --ink: #F1F2F4;
  --on-ink: #101114;

  --ok: #5BC28E;
  --ok-text: #5BC28E;
  --ok-soft: #173327;
  --warn: #E3A857;
  --warn-text: #E3A857;
  --warn-soft: #38301D;
  --danger: #EC8074;
  --danger-text: #EC8074;
  --danger-soft: #3A211E;
  --info: #93A8ED;
  --info-text: #93A8ED;
  --info-soft: #20263B;

  --viz-1: #E08A6D;
  --viz-2: #8B94E8;

  --elev-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 8px 24px rgb(0 0 0 / 0.24);
  --elev-overlay: 0 12px 32px rgb(0 0 0 / 0.48);
}

/* --- §7.1 global kill switch + base reset -------------------------------- */
* { animation: none !important; transition: none !important; box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  text-wrap: pretty;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }