/* SUPASMART estate tokens — the one served token sheet.
 *
 * Founder, 2026-08-20, ruling 1 — "Serve the values": /shell/ serves one token
 * sheet, tokens.css. Nothing else moves to the shell.
 *
 * Consume it BEFORE the app's own styles, so a surface that deliberately
 * differs still wins from its own :root:
 *   <link rel="stylesheet" href="/shell/tokens.css?v=20260905-lean">
 *
 * Values are BRAND.md §2 (palette), §3 (type), §6 (motion). This is the ONE
 * estate `ui/` file that may DECLARE a §2 hex; gate.sh's check_palette_law
 * fails every other declaration site.
 */
:root {
  /* ── §2 palette — one neutral ramp, one accent, white paper ─────────────
     Every colour carries a job. Never repurpose one, never add a hue. */
  --paper: #fff;
  --ink: #202124;
  --muted: #5f6368;
  --faint: #9aa0a6;
  --hairline: #e8eaed;
  --box: #dfe1e5;
  --wash: #f8f9fa;
  --calm: #f1f3f4;
  --tomato: #df3b2f;
  --tomato-dark: #bc2b23;
  --tomato-wash: #fdeceb;

  /* Office department data hues, from the approved canvas. They mark a
     series or rule dot; card surfaces keep the neutral ramp above. The canvas
     README names SIX: the four departments, the recruiter, and the grey a
     tool card or an unassigned row is drawn in. */
  --tele: 47, 95, 216;
  --rm: 217, 84, 43;
  --soc: 168, 108, 18;
  --kb: 15, 138, 114;
  --rec: 14, 124, 154;
  --grey: 100, 107, 122;

  /* Office canvas values. Only .office-theme binds these to the ordinary
     names; importing the file does not repaint legacy V2. */
  --office-font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --office-display: "Instrument Serif", Georgia, serif;
  --office-ink: #14161c;
  --office-muted: #646b7a;
  --office-faint: #9aa1ae;
  --office-neutral: #f7f8fa;
  --office-hairline: color-mix(in srgb, var(--office-ink) 8%, transparent);
  --office-box: color-mix(in srgb, var(--office-ink) 16%, transparent);
  --office-glass-ground: linear-gradient(165deg, color-mix(in srgb, var(--paper) 86%, transparent), color-mix(in srgb, var(--office-neutral) 72%, transparent));
  --office-glass-sheen: linear-gradient(112deg, transparent 46%, color-mix(in srgb, var(--paper) 45%, transparent) 52%, transparent 58%);
  --office-glass-lift: 0 0 0 1px color-mix(in srgb, var(--office-ink) 7%, transparent), inset 0 1px 0 var(--paper), 0 18px 40px -24px color-mix(in srgb, var(--office-ink) 22%, transparent);
  --office-chat-lift: 0 0 0 1px color-mix(in srgb, var(--office-ink) 9%, transparent), inset 0 1px 0 var(--paper), inset 0 -1px 0 color-mix(in srgb, var(--office-ink) 3.5%, transparent), 0 26px 44px -22px color-mix(in srgb, var(--office-ink) 28%, transparent);
  --office-card-radius: 22px;
  --office-table-radius: 18px;
  --office-gutter: 160px;

  --glass-blur: blur(18px) saturate(140%);
  --glass-hairline: 1px solid var(--paper);
  --glass-lift: 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), inset 0 1px 0 var(--paper), 0 18px 40px -24px color-mix(in srgb, var(--ink) 22%, transparent);

  /* ── §3 type ────────────────────────────────────────────────────────────
     Founder, 2026-08-20, ruling 3: "Which font are we using on the homepage?
     That is what we have to stick to. Make those points the default." The
     homepage face is Inter, and its display points are the defaults below.
     A default is overridable: a surface whose own recorded canon is 400/500
     keeps it, and a font ruling changes no body size. "Supa Display" (Bebas)
     retires from product surfaces and has no token here. */
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-display: 650;
  --fw-label: 550;

  /* ── shape ──────────────────────────────────────────────────────────────
     The three radii the estate actually repeats, counted off the shipped CSS:
     999px (166 uses), 12px (88), 16px (74). */
  --r-sm: 12px;
  --r: 16px;
  --pill: 999px;

  /* ── §6 motion and the ink depth cues ───────────────────────────────────
     Founder, 2026-08-20, ruling 2 — "Ink everywhere": the chosen/selected
     state fills INK, the keyboard focus ring is INK, tomato (#df3b2f) is only
     the single accent and the invalid marker. Nothing below may reach for
     --tomato, and --focus supersedes the launcher's tomato outline rings.
     Every shadow is --ink at an alpha, written so it says so — each mix
     computes to §2's shipped rgba(32,33,36,…) value exactly. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: .15s;
  --swift: var(--dur) var(--ease);
  --rest: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  --lift: 0 1px 8px color-mix(in srgb, var(--ink) 14%, transparent);
  --ring: 0 1px 6px color-mix(in srgb, var(--ink) 18%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 32%, transparent);
  --focus: 2px solid var(--ink); /* pair with outline-offset: 2px */

  /* ── spacing and layout values (founder, 2026-08-20, ruling 4) ──────────
     Verbatim:

       "While you're at it, try to make the spacing and the layouts consistent
       and reusable, and also improve everything using front-end design skills
       or other good trending skills for front-end."

       "Select what looks best and try to replicate it and improve it across.
       For example, the 'draft a month' in social media manager is very poor,
       but it is slightly better in the SupaSales 'create an agent'."

     The scale is measured, not invented: a census of every estate `ui/` file
     counted 3,067 spacing declarations. It keeps every value in that census's
     top-15 gap, padding and margin lists except 2, 5, 7, 9, 11, 13, 22 and
     26px — each within 2px of the step it now rounds onto. 2px apart up to
     20px, where the estate's mass sits (10px is its single most-used gap at
     150 uses, 12px its most-used padding at 236); 4px apart above it, where
     nothing was ever that precise. Keeping every observed value would have
     made a census, not a scale. */
  --s1: 4px;   --s2: 6px;   --s3: 8px;   --s4: 10px;  --s5: 12px;
  --s6: 14px;  --s7: 16px;  --s8: 18px;  --s9: 20px;  --s10: 24px;
  --s11: 28px; --s12: 32px; --s13: 40px;

  /* Rhythm — the four jobs every surface kept re-deriving by hand, each read
     off the benchmark ruling 4 names, SupaSales' agents home
     (`apps/supasales/ui/app.css`): between blocks 16px (its grid gap), inside
     a block 10px (its sub-line lead), page gutter and card padding 24px (its
     stage padding-inline and its card padding). Reach for these before a
     bare step — a name says WHY, a number only says how much. */
  --stack: var(--s7);
  --stack-tight: var(--s4);
  --page-pad: var(--s10);
  --card-pad: var(--s10);

  /* Columns — the three widths the estate already converged on, one per job.
     560px is its most-repeated width (6 folders) and reads near 70 characters
     at the body size, so it is the reading and single-form column; 720px (3
     folders) is the ordinary app column; 1120px (3) is the workspace, and is
     the benchmark's own `width: min(1120px, 100%)`. */
  --col-read: 560px;
  --col-app: 720px;
  --col-wide: 1120px;

  /* ── aliases ────────────────────────────────────────────────────────────
     Every custom-property NAME the estate already binds to a §2 hex, pointed
     at its canonical token, so a surface can delete its local :root without
     touching one var() call. Load order settles the rest: a surface that
     deliberately binds one of these to something else — the wiki reader's
     --ink/--line/--accent, the mindmap's --bg/--ink/--line/--accent, the
     Brain's --paper — keeps its own :root and still wins over this sheet. */
  --land-ink: var(--ink); --we-ink: var(--ink); --sc-ink: var(--ink);
  --forget-ink: var(--ink); --g-ink: var(--ink);

  --land-muted: var(--muted); --we-muted: var(--muted); --sc-muted: var(--muted);
  --forget-muted: var(--muted); --g-muted: var(--muted);

  --land-faint: var(--faint); --muted-2: var(--faint);

  --line: var(--hairline); --hair: var(--hairline); --land-hair: var(--hairline);
  --we-line: var(--hairline); --sc-line: var(--hairline);
  --forget-line: var(--hairline); --c-line: var(--hairline);

  --line-strong: var(--box); --land-box: var(--box); --sc-box: var(--box);

  --soft: var(--wash); --we-soft: var(--wash); --c-wash: var(--wash);

  --fill: var(--calm); --calm-bg: var(--calm); --line-soft: var(--calm);
  --land-calm-bg: var(--calm); --sc-fill: var(--calm);
  --forget-calm: var(--calm); --c-fill: var(--calm);

  --bg: var(--paper); --white: var(--paper); --sc-paper: var(--paper);
  --forget-paper: var(--paper);

  --red: var(--tomato); --accent: var(--tomato); --land-accent: var(--tomato);
  --we-tomato: var(--tomato); --sc-tomato: var(--tomato);

  --red-dark: var(--tomato-dark); --accent-dark: var(--tomato-dark);
  --land-accent-hover: var(--tomato-dark); --we-tomato-dark: var(--tomato-dark);
  --sc-tomato-dark: var(--tomato-dark); --forget-danger: var(--tomato-dark);

  --soft-red: var(--tomato-wash); --land-accent-bg: var(--tomato-wash);
  --we-soft-red: var(--tomato-wash); --sc-tomato-wash: var(--tomato-wash);
  --forget-danger-wash: var(--tomato-wash);

  /* Shape, motion and type names bound to these same values in the wild. */
  --r-card: var(--r); --r-input: var(--r-sm); --r-pill: var(--pill);
  --shadow: var(--lift); --lift-2: var(--lift); --lift-input: var(--ring);
  --we-ease: var(--ease);
  --land-sans: var(--font); --wiki-shell-sans: var(--font); --sc-sans: var(--font);
}

/* The ONE element rule this sheet declares: the served type default. Five of
   SupaCRM's nine pages never load an app stylesheet, so nothing applied --font
   and they rendered in the UA serif. A page that wants another face still wins
   from its own sheet, which loads after this one. */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
}