/* ============================================================================
   GOBIMANS Client-Ops — DESIGN TOKENS (single source of truth)
   ----------------------------------------------------------------------------
   The machine-readable spine of the CRM's look. Everything visual references a
   token from here; styles.css holds only component rules. To re-skin the whole
   app, you edit this file and nothing else.

   Loaded BEFORE styles.css (see index.html) so every rule inherits these vars.

   Why plain CSS custom properties and not a Style-Dictionary / W3C-JSON build:
   the app is vanilla, no bundler, no build step. CSS vars give us the same
   "one source, machine-readable, swap-to-reskin" contract at this scale without
   adding a toolchain. (Per the no-overengineering rule — solutions to real size.)

   LOCKED by brand: the colour roles (ultramarine / terracotta / orange on honest
   cool-white + coal). Type family is NOT locked yet — the brandbook says Geologica,
   but --font-ui below is actually Inter; canon is Andrei's call, leave as Inter until
   he decides (GOBIMANS-182 — do not "fix" this to Geologica without his say-so).
   Structure below the colour roles — spacing, radii, elevation, the type scale —
   is free to evolve.
   ============================================================================ */

:root {
  --content-max: none;   /* полная ширина экрана; вернуть 1100px — одна строка */
  /* Honest cool neutrals — no warm cream, no pure #fff/#000. --ink carries the ultramarine hue
     (coal-ultramarine #14122A) so it doubles as both body text and the rail/topbar surface —
     De Stijl logic: white + coal carry the structure, ultramarine/terracotta/orange are the POV. */
  --surface:    #ffffff;   /* card surfaces */
  --parch:      #efefef;   /* page canvas (neutral light gray) */
  --parch-2:    #f5f5f5;   /* alt surface / inset / column background */
  --parch-3:    #e8e8e8;   /* stronger inset / divider */
  --ink:        #14122a;   /* coal-ultramarine — text + rail/topbar surface + primary button. GOBIMANS-182. */
  --ink-2:      #4d4d4d;   /* secondary text, body emphasis */
  --muted:      #6d6d6d;   /* darkened for AA >4.5:1 on white */
  --line:       #e2e2e2;   /* border */
  --line-soft:  #ededed;
  --bronze:     #ff682c;   /* PRIMARY accent — Signal Orange (active/focus/marks, NOT button bg) */
  --bronze-2:   #ff7d47;   /* on-dark accent — lighter orange */
  /* --bronze on white is ~2.9:1 — fails the 3:1 UI-component-contrast floor for a focus
     ring (WCAG 2.2 SC 1.4.11). A touch darker clears it while staying visibly "the orange"
     and still reads fine on the dark rail. GOBIMANS-195. */
  --focus-ring: color-mix(in oklch, var(--bronze) 85%, black);
  --bronze-ink: #816729;   /* Sienna Bronze — muted brand tone for headings/links/marks */
  --terra:      #c4633b;   /* terracotta — secondary accent (kept, Andrei's) */
  --orange:     #ff682c;

  /* Client-portal QR (GOBIMANS-144). Literal, NOT var(--ink) — --ink flips light in dark mode,
     which would kill contrast. A QR needs a light quiet zone + dark modules to scan in either
     theme; this is coal-ultramarine (brand dark), not pure #000. */
  --qr-fg:      #14122a;
  --qr-bg:      #ffffff;

  /* status — backlog · brief · production · review · approval · done */
  --s-backlog:  oklch(0.60 0.025 265);
  --s-brief:    oklch(0.56 0.15 264);
  --s-prod:     oklch(0.70 0.16 58);
  --s-review:   oklch(0.55 0.15 300);
  --s-appr:     oklch(0.58 0.15 38);
  --s-done:     oklch(0.55 0.13 150);
  --s-none:     oklch(0.74 0.018 265);

  /* urgency / priority — A hot(red)/B warn(amber) already existed; C ("understood") had no
     dedicated colour and fell back to the near-invisible --s-none grey (GOBIMANS-252). A calm
     cool teal reads clearly as "no rush" without clashing with any existing status/urgency hue
     (27 hot, 58-64 warn/prod, 150 done, 264 brief, 300 review, 38 approval). */
  --u-hot:      oklch(0.55 0.20 27);
  --u-warn:     oklch(0.72 0.16 60);
  --u-ok:       oklch(0.62 0.09 200);

  /* ── Structural scale system ────────────────────────────────────────────
     A real design-system spine, tuned to GOBIMANS values. 4px spacing ladder,
     a radii ramp, and a 5-tier elevation ramp — every shadow tinted to the
     ultramarine hue so depth reads as the brand, never a generic grey drop.
     De Stijl logic holds: structural planes stay flat (border + whisper-lift);
     only things that genuinely float earn real elevation. */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    8px;     /* cards + inputs */
  --r-lg:    16px;
  --r-full:  9999px;
  --r-pill:  999px;   /* buttons / tags — pill */
  --radius:    var(--r-md);    /* back-compat aliases — existing rules keep working */
  --radius-sm: var(--r-sm);

  /* elevation ramp — resting < hover/menu < modal/popover < toast < dragging */
  --e-1:    0 1px 2px rgba(32,32,32,.04);
  --e-2:    0 1px 3px rgba(32,32,32,.04), 0 4px 12px rgba(32,32,32,.03);
  --e-3:    0 2px 6px rgba(32,32,32,.06), 0 16px 40px rgba(32,32,32,.08);
  --e-4:    0 4px 10px rgba(32,32,32,.08), 0 24px 60px rgba(32,32,32,.10);
  --e-drag: 0 10px 24px rgba(32,32,32,.14), 0 2px 6px rgba(32,32,32,.10);
  --shadow: var(--e-2);        /* legacy alias → hover / menu tier */
  --topbar-h:  54px;
  --kanban-chrome: 188px;   /* GOBIMANS-199: was a magic number in .kanban's min-height calc — chrome above/below the board (filter strip, paddings) not covered by --topbar-h */

  /* motion — ease-out only, short durations (product register) */
  --ease:       cubic-bezier(.22, 1, .36, 1);   /* ease-out-quint */
  --t-fast:     120ms;
  --t-base:     200ms;
}

/* ---------------------------------------------------------------------------
   Dark theme (GOBIMANS-94) — manual toggle (menu + localStorage), not
   prefers-color-scheme. Same coal-ultramarine hue family, inverted for
   content surfaces; the rail/topbar stay their own fixed dark regardless
   (see .rail/.topstrip in styles.css) — only the canvas/cards/text invert.
   Status/accent hues (--s-*, --bronze, --terra, --orange) are left as-is;
   every component that tints against a neutral already reads var(--surface)/
   var(--ink) instead of hardcoded white/black, so they invert correctly too.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --surface:    #211f38;
  --parch:      #14122a;
  --parch-2:    #1a1830;
  --parch-3:    #262346;
  --ink:        #f1eff8;
  --ink-2:      #c9c6d9;
  --muted:      #948fae;
  --line:       #322e52;
  --line-soft:  #2a2748;
}

/* Type system — ONE Cyrillic-capable family carries the whole product UI (headings, labels,
   body, numbers); hierarchy comes from weight + tracking, not a second face. Bricolage
   Grotesque (Latin-only — it has NO Cyrillic) is kept STRICTLY for the GOBIMANS wordmark logo.
   Swap --font-ui to retypeset the entire app. */
:root {
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;  /* PolySans not web-loadable → its own listed fallback */
  --font-num:     "Inter", system-ui, sans-serif;   /* metrics — paired with tabular-nums below */
  --font-logo:    "Bricolage Grotesque", var(--font-ui);   /* GOBIMANS wordmark stays */
  /* optical tracking ramp — larger type sets tighter */
  --tk-display: -0.022em;
  --tk-head:    -0.013em;
  --tk-tight:   -0.006em;
  /* type scale — tuned for Inter (see the header note re: Geologica); weight + tracking carry hierarchy */
  --fs-display:  33px;
  --fs-h1:       28px;
  --fs-h2:       24px;
  --fs-h3:       18px;
  --fs-body-lg:  16px;
  --fs-body:     15px;
  --fs-sm:       14px;
  --fs-caption:  12.5px;
  --fs-overline: 11px;
}