/* ============================================================
   WORKSET APPLY — DESIGN TOKENS
   Single source of truth. Change a value here and the whole UI follows.
   Dark mode default · Light mode via html[data-theme="light"]
   ============================================================ */

:root {
  /* ── Surface scale (dark mode default) ─────────────────── */
  --bg-base:         #07070b;
  --bg-elevated:     #0d0d14;
  --bg-glass:        rgba(20, 20, 28, 0.55);
  --bg-glass-strong: rgba(28, 28, 38, 0.78);
  --bg-input:        rgba(0, 0, 0, 0.30);
  --bg-input-focus:  rgba(0, 0, 0, 0.42);

  /* ── Text scale ────────────────────────────────────────── */
  --text-primary:    #f5f5f7;
  --text-secondary:  #a8a8b3;
  --text-tertiary:   #6b6b78;
  --text-disabled:   #3f3f4a;
  --text-on-accent:  #07070b;          /* sits ON top of accent buttons */

  /* ── Borders ───────────────────────────────────────────── */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.18);

  /* ── Brand accent — single hero color ──────────────────── */
  --accent:          #b4ff39;          /* electric lime */
  --accent-soft:     rgba(180, 255, 57, 0.12);
  --accent-glow:     rgba(180, 255, 57, 0.30);
  --accent-pressed:  #9be028;

  /* Secondary accents (for gradient text and mesh blobs) */
  --accent-2:        #6366f1;          /* indigo */
  --accent-3:        #ec4899;          /* pink */

  /* ── Semantic colors ───────────────────────────────────── */
  --success:         #4ade80;
  --success-soft:    rgba(74, 222, 128, 0.12);
  --warning:         #fbbf24;
  --warning-soft:    rgba(251, 191, 36, 0.12);
  --danger:          #f87171;
  --danger-soft:     rgba(248, 113, 113, 0.12);
  --info:            #60a5fa;

  /* ── Typography ────────────────────────────────────────── */
  --font:            'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --t-xs:    12px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   32px;
  --t-3xl:   44px;
  --t-4xl:   60px;
  --t-5xl:   84px;

  /* ── Spacing scale (4-based) ───────────────────────────── */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;

  /* ── Radius scale ──────────────────────────────────────── */
  --r-xs:    6px;
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-full:  9999px;

  /* ── Easing curves (iOS-like) ──────────────────────────── */
  --ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in:     cubic-bezier(0.6, 0, 0.84, 0);
  --ease-io:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Duration ──────────────────────────────────────────── */
  --d-fast:   140ms;
  --d-base:   220ms;
  --d-slow:   420ms;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 40px var(--accent-glow);

  /* ── Layout ────────────────────────────────────────────── */
  --container:   min(92vw, 1200px);
  --container-narrow: min(92vw, 720px);

  /* ── Z-index ───────────────────────────────────────────── */
  --z-bg:    -1;
  --z-base:   0;
  --z-float: 10;
  --z-nav:   100;
  --z-modal: 1000;
}

/* ============================================================
   LIGHT MODE — WorkSet brand teal, more conservative
   Activated by html[data-theme="light"]
   ============================================================ */
[data-theme="light"] {
  --bg-base:         #f5f7fa;
  --bg-elevated:     #ffffff;
  --bg-glass:        rgba(255, 255, 255, 0.70);
  --bg-glass-strong: rgba(255, 255, 255, 0.88);
  --bg-input:        rgba(0, 0, 0, 0.02);
  --bg-input-focus:  rgba(2, 98, 98, 0.04);

  --text-primary:    #0a1628;
  --text-secondary:  #4a6070;
  --text-tertiary:   #5a7184;
  --text-disabled:   #c3d0db;
  --text-on-accent:  #ffffff;

  --border-subtle:   rgba(2, 98, 98, 0.08);
  --border-default:  rgba(2, 98, 98, 0.14);
  --border-strong:   rgba(2, 98, 98, 0.24);

  --accent:          #026262;          /* WorkSet teal */
  --accent-soft:     rgba(2, 98, 98, 0.10);
  --accent-glow:     rgba(2, 98, 98, 0.25);
  --accent-pressed:  #014545;

  --accent-2:        #4338ca;
  --accent-3:        #be185d;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
}