/* ============================================================================
 * @logishell/tokens — the single source of truth
 * ----------------------------------------------------------------------------
 * Extracted verbatim from apps/office/src/app/globals.css and tokenised so any
 * app (canvas, lander, sign, admin…) and any agent can consume the same values.
 * Aesthetic: "zen-tech / quiet cyberpunk". Warm-cool neutral, never pure b/w.
 *
 *   Light is the :root default. Dark is opted into with <html data-theme="dark">.
 *   Blocks marked  ✦ ADDED  did not exist in globals.css — they are the
 *   "universalisation" layer (spacing, type scale, z-index, motion) that every
 *   app re-invented inline. Promoting them here is step one of the refactor.
 * ========================================================================= */

:root {
  /* ── Base — warm-cool neutral. NOT pure white/black. ────────────────── */
  --bg: oklch(0.985 0.004 95);
  --bg-1: oklch(0.965 0.006 95);
  --bg-2: oklch(0.94 0.008 95);
  --surface: oklch(1 0 0 / 0.88);
  --surface-strong: oklch(1 0 0 / 0.98);
  --border: oklch(0.85 0.008 95 / 0.7);
  --border-strong: oklch(0.78 0.012 95);
  --hairline: oklch(0.88 0.006 95);

  /* ── Ink — text ramp ────────────────────────────────────────────────── */
  --ink: oklch(0.18 0.01 95);
  --ink-1: oklch(0.32 0.01 95);
  --ink-2: oklch(0.5 0.012 95);
  --ink-3: oklch(0.65 0.01 95);

  /* ── Accent — honey / amber (the brand). Per-org override via --brand-*. ─
     branding-context.tsx sets --brand-primary / --brand-accent on :root from
     the tenant_branding row; the kit reads them with the LogicBlocks defaults as
     fallback, so every component reskins to the organisation automatically. */
  --primary: var(--brand-primary, oklch(0.76 0.13 78));   /* CTA base */
  --accent: var(--brand-accent, oklch(0.78 0.14 80));     /* highlight  */
  --accent-ink: oklch(0.32 0.08 70);        /* ink ON a SOLID --accent fill (buttons, checks) */
  --accent-text: oklch(0.5 0.13 65);        /* accent-coloured TEXT on a soft accent wash — readable per theme */
  --accent-glow: color-mix(in oklch, var(--accent), transparent 82%);

  /* ── Cyber — teal signal (live / system / data) ─────────────────────── */
  --cyber: oklch(0.72 0.15 195);
  --cyber-glow: oklch(0.72 0.15 195 / 0.22);
  --mk-fill: var(--accent);
  --mk-face: var(--accent-ink);

  /* ── Canvas-OS — the big-cell grid the whole product sits on ─────────── */
  --cell: 104px;                             /* cell size — large, deliberate */
  --cell-line: oklch(0.78 0.01 95 / 0.3);    /* faint hairline that draws the cells */
  --cell-line-strong: oklch(0.72 0.012 95 / 0.5);

  /* ── Semantic status ────────────────────────────────────────────────── */
  --pos: oklch(0.7 0.13 145);
  --warn: oklch(0.78 0.14 70);
  --neg: oklch(0.62 0.18 25);

  /* ── Glass — frosted surface system ─────────────────────────────────── */
  --glass: oklch(1 0 0 / 0.55);
  --glass-stroke: oklch(1 0 0 / 0.7);
  --glass-shadow:
    0 1px 0 oklch(1 0 0 / 0.6) inset, 0 0 0 1px oklch(0.85 0.008 95 / 0.5),
    0 20px 40px -20px oklch(0.3 0.02 80 / 0.18);

  /* ── Type families ──────────────────────────────────────────────────── */
  --font-sans: 'Geist', ui-sans-serif, 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Geist', 'SF Pro Display', -apple-system, system-ui, sans-serif;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* ── ✦ ADDED · Type scale — formalised from observed inline sizes ────── */
  --text-mono: 11px;       /* mono labels, eyebrows */
  --text-xs: 11.5px;
  --text-sm: 12.5px;       /* button / body-tight */
  --text-base: 13px;       /* body */
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 34px;
  --text-3xl: 48px;        /* hero display */
  --leading-tight: 1.15;
  --leading-body: 1.55;
  --tracking-tight: -0.005em;
  --tracking-mono: 0.06em;

  /* ── ✦ ADDED · Spacing scale (4px base) — was inline everywhere ──────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── ✦ ADDED · Motion — match the .btn / panel feel ──────────────────── */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-1: 0.12s;
  --dur-2: 0.18s;
  --dur-3: 0.4s;

  /* ── ✦ ADDED · Z-index — collected from scattered magic numbers ──────── */
  --z-shell: 30;
  --z-menu: 80;
  --z-mic: 90;
  --z-overlay: 95;
}

[data-theme='dark'] {
  --bg: oklch(0.18 0.01 260);
  --bg-1: oklch(0.21 0.012 260);
  --bg-2: oklch(0.24 0.014 260);
  --surface: oklch(0.26 0.014 260 / 0.88);
  --surface-strong: oklch(0.28 0.016 260 / 0.98);
  --border: oklch(0.4 0.014 260 / 0.5);
  --border-strong: oklch(0.5 0.016 260);
  --hairline: oklch(0.32 0.012 260);

  --ink: oklch(0.97 0.006 95);
  --ink-1: oklch(0.86 0.008 95);
  --ink-2: oklch(0.66 0.01 95);
  --ink-3: oklch(0.5 0.012 95);

  --primary: var(--brand-primary, oklch(0.8 0.14 82));
  --accent: var(--brand-accent, oklch(0.83 0.16 85));
  --accent-ink: oklch(0.28 0.06 72);
  --accent-text: oklch(0.85 0.15 86);
  --accent-glow: color-mix(in oklch, var(--accent), transparent 78%);

  --cyber: oklch(0.78 0.16 195);
  --cyber-glow: oklch(0.78 0.16 195 / 0.28);
  --mk-fill: var(--accent);
  --mk-face: var(--accent-ink);

  --cell-line: oklch(0.45 0.014 260 / 0.3);
  --cell-line-strong: oklch(0.52 0.016 260 / 0.48);

  --pos: oklch(0.78 0.14 145);
  --warn: oklch(0.82 0.14 80);
  --neg: oklch(0.7 0.18 25);

  --glass: oklch(0.3 0.02 260 / 0.55);
  --glass-stroke: oklch(0.55 0.02 260 / 0.4);
  --glass-shadow:
    0 1px 0 oklch(1 0 0 / 0.06) inset, 0 0 0 1px oklch(0.5 0.02 260 / 0.3),
    0 20px 40px -20px oklch(0 0 0 / 0.5);
}