/* ════════════════════════════════════════════════════════════════════════════
   o9n · DESIGN TOKENS — LIGHT (Z.ai language)
   Single source of truth for the entire UI. Override variables, not values.
   Only COLOR tokens were re-derived on the zinc/neutral ramp; every structural
   token (type scale, spacing, radii sizes, motion, z-index, layout) is intact,
   so the full component layer re-themes with zero markup changes.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR · base surfaces (flipped to white/zinc) ─────────────────────── */
  --bg:        #09090b;
  --surface:   #111113;
  --surface2:  #1a1a1f;
  --surface3:  #242429;
  --overlay:   rgba(9,9,11,.92);

  --border:    rgba(255,255,255,.08);
  --border2:   rgba(255,255,255,.12);
  --border3:   rgba(255,255,255,.18);

  --text:      #fafafa;
  --muted:     #8b98a8;
  --subtle:    #6b7484;
  --slate:     #cbd5e1;                /* Z.ai sets headings in slate */

  /* ── COLOR · accent + semantic ─────────────────────────────────────────── */
  --accent:      #22d3ee;              /* cyan-600 — readable on white; identity-only */
  --accent-hover:#06b6d4;
  --accent-soft: rgba(34,211,238,.12);
  --accent-mid:  rgba(34,211,238,.22);
  --accent-ink:  #09090b;              /* text on accent-filled surfaces */

  --success:   #10b981;
  --success-s: rgba(16,185,129,.12);
  --warning:   #f59e0b;
  --warning-s: rgba(245,158,11,.12);
  --error:     #ef4444;
  --error-s:   rgba(239,68,68,.12);
  --info:      #3b82f6;
  --info-s:    rgba(59,130,246,.12);

  /* ── PRIMARY ACTION (Z.ai near-black — NOT the accent) ─────────────────── */
  --btn:        #22d3ee;
  --btn-grad:   linear-gradient(180deg,#22d3ee,#06b6d4);
  --btn-text:   #09090b;

  /* ── BRAND IDENTITY (ghost avatar gradient keeps the bright cyan) ──────── */
  --ghost-a:   #22d3ee;
  --ghost-b:   #10b981;

  /* ── COLOR · canvas (workflow/graph surface) — light by default ────────── */
  --canvas-bg:   #0d0d12;
  --node-bg:     #1a1a2e;
  --node-border: #334155;
  --grid-dot:    #1e293b;
  /* dark "stage" overrides live in components under .wf-wire-canvas--stage */

  /* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;   /* hero/display moments */
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code",
          "SF Mono", Menlo, Consolas, monospace;

  /* fluid type scale — uses clamp(min, fluid, max) to scale with viewport */
  --text-2xs: clamp(0.6875rem, 0.66rem + 0.13vw, 0.75rem);    /*  11 → 12 */
  --text-xs:  clamp(0.75rem,   0.72rem + 0.13vw, 0.8125rem);  /*  12 → 13 */
  --text-sm:  clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);   /*  13 → 14 */
  --text-base:clamp(0.875rem,  0.84rem + 0.18vw, 0.9375rem);  /*  14 → 15 */
  --text-md:  clamp(0.9375rem, 0.90rem + 0.22vw, 1rem);       /*  15 → 16 */
  --text-lg:  clamp(1.0625rem, 1.01rem + 0.25vw, 1.125rem);   /*  17 → 18 */
  --text-xl:  clamp(1.25rem,   1.18rem + 0.35vw, 1.375rem);   /*  20 → 22 */
  --text-2xl: clamp(1.5rem,    1.40rem + 0.50vw, 1.75rem);    /*  24 → 28 */
  --text-3xl: clamp(1.875rem,  1.72rem + 0.75vw, 2.25rem);    /*  30 → 36 */
  --text-4xl: clamp(2.25rem,   2.04rem + 1.05vw, 3rem);       /*  36 → 48 */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

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

  /* tracking */
  --track-tight: -0.02em;
  --track-snug:  -0.01em;
  --track-wide:   0.04em;
  --track-wider:  0.08em;
  --track-widest: 0.18em;

  /* ── SPACING SCALE (4px base) ──────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── RADII (enlarged toward Z.ai's generous corners) ───────────────────── */
  --r-sm:   8px;
  --r:      12px;
  --r-md:   14px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 9999px;

  /* ── SHADOWS (soft, light-mode) ────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow:     0 4px 16px rgba(24,24,27,.07), 0 1px 3px rgba(24,24,27,.05);
  --shadow-md:  0 8px 24px rgba(24,24,27,.09);
  --shadow-lg:  0 12px 40px rgba(24,24,27,.12), 0 4px 12px rgba(24,24,27,.06);
  --shadow-xl:  0 24px 60px rgba(24,24,27,.16);
  --glow-accent: 0 0 0 1px var(--accent-mid),
                 0 0 24px -6px rgba(6,182,212,.35);

  /* ── MOTION ────────────────────────────────────────────────────────────── */
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   420ms;
  --t-deep:   720ms;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasis: cubic-bezier(0.83, 0, 0.17, 1);

  /* ── Z-INDEX SCALE ─────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;

  /* ── LAYOUT ────────────────────────────────────────────────────────────── */
  --sidebar-w:        240px;
  --sidebar-collapsed:64px;
  --rail-w:           320px;
  --topbar-h:         60px;
  --bottomnav-h:      68px;
  --content-max:      1440px;
  --content-pad:      var(--space-4);
}

@media (min-width: 768px)  { :root { --content-pad: var(--space-6); } }
@media (min-width: 1024px) { :root { --content-pad: var(--space-8); } }

/* ── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── LIGHT-MODE SURFACE DEFAULTS ────────────────────────────────────────── */
html, body { background: var(--bg); color: var(--text); }
::-webkit-scrollbar { width: 0; height: 0; }
::selection { background: var(--accent-soft); color: var(--accent); }