/* ============================================================
   FRACTO — Design Tokens
   Source of truth for color, type, spacing, radius, elevation.
   ============================================================ */

:root {
  /* ─── Sky (Primary) ─────────────────────────────────────── */
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;  /* brand light */
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;  /* brand dark */
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;

  /* ─── Accents (category tags) ──────────────────────────── */
  --violet-50:#f5f3ff; --violet-100:#ede9fe; --violet-200:#ddd6fe; --violet-300:#c4b5fd;
  --violet-400:#a78bfa; --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-700:#6d28d9;
  --violet-800:#5b21b6; --violet-900:#4c1d95; --violet-950:#2e1065;

  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-300:#6ee7b7;
  --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
  --emerald-800:#065f46; --emerald-900:#064e3b; --emerald-950:#022c22;

  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d;
  --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --amber-800:#92400e; --amber-900:#78350f; --amber-950:#451a03;

  --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-200:#fecdd3; --rose-300:#fda4af;
  --rose-400:#fb7185; --rose-500:#f43f5e; --rose-600:#e11d48; --rose-700:#be123c;
  --rose-800:#9f1239; --rose-900:#881337; --rose-950:#4c0519;

  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-300:#5eead4;
  --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
  --teal-800:#115e59; --teal-900:#134e4a; --teal-950:#042f2e;

  /* ─── Neutrals (Slate) ──────────────────────────────────── */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* ─── Semantic (light theme defaults) ───────────────────── */
  --bg:            var(--slate-50);
  --bg-elevated:   #ffffff;
  --bg-muted:      var(--slate-100);
  --bg-subtle:     var(--slate-50);
  --fg:            var(--slate-900);
  --fg-muted:      var(--slate-600);
  --fg-subtle:     var(--slate-500);
  --fg-inverse:    #ffffff;
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --ring:          var(--sky-400);

  --brand:         var(--sky-700);
  --brand-hover:   var(--sky-800);
  --brand-soft:    var(--sky-100);
  --brand-fg:      #ffffff;
  --brand-accent:  var(--sky-400);

  --success: var(--emerald-600);
  --warning: var(--amber-500);
  --danger:  var(--rose-600);

  /* ─── Type ──────────────────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, "Cascadia Mono", monospace;

  --text-xs:   12px; --text-xs-lh:   16px;
  --text-sm:   13px; --text-sm-lh:   20px;
  --text-base: 15px; --text-base-lh: 24px;
  --text-md:   16px; --text-md-lh:   24px;
  --text-lg:   18px; --text-lg-lh:   28px;
  --text-xl:   20px; --text-xl-lh:   28px;
  --text-2xl:  24px; --text-2xl-lh:  32px;
  --text-3xl:  30px; --text-3xl-lh:  36px;
  --text-4xl:  36px; --text-4xl-lh:  40px;
  --text-5xl:  48px; --text-5xl-lh:  1.05;
  --text-6xl:  64px; --text-6xl-lh:  1.0;

  /* ─── Spacing (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;

  /* ─── Radius ────────────────────────────────────────────── */
  --radius-base: 8px;            /* tweakable */
  --radius-xs:   calc(var(--radius-base) * 0.25);
  --radius-sm:   calc(var(--radius-base) * 0.5);
  --radius-md:   var(--radius-base);
  --radius-lg:   calc(var(--radius-base) * 1.5);
  --radius-xl:   calc(var(--radius-base) * 2);
  --radius-2xl:  calc(var(--radius-base) * 3);
  --radius-full: 9999px;

  /* ─── Shadow ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06), 0 1px 3px 0 rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.06);
  --shadow-2xl:0 25px 50px -12px rgb(15 23 42 / 0.18);
  --shadow-inner: inset 0 1px 2px 0 rgb(15 23 42 / 0.05);

  /* ─── Motion ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ─── Dark theme ───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            var(--slate-950);
  --bg-elevated:   var(--slate-900);
  --bg-muted:      var(--slate-800);
  --bg-subtle:     #0a1424;
  --fg:            var(--slate-50);
  --fg-muted:      var(--slate-400);
  --fg-subtle:     var(--slate-500);
  --fg-inverse:    var(--slate-900);
  --border:        rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.16);

  --brand:         var(--sky-400);
  --brand-hover:   var(--sky-300);
  --brand-soft:    rgb(56 189 248 / 0.12);
  --brand-fg:      var(--slate-950);
  --brand-accent:  var(--sky-300);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.45), 0 1px 3px 0 rgb(0 0 0 / 0.30);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.30);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.50), 0 4px 6px -4px rgb(0 0 0 / 0.30);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.35);
  --shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.65);
}

/* ─── Accent overrides ─────────────────────────────────────── */
[data-accent="violet"]  { --ring: var(--violet-400);  }
[data-accent="emerald"] { --ring: var(--emerald-400); }
[data-accent="amber"]   { --ring: var(--amber-400);   }
[data-accent="rose"]    { --ring: var(--rose-400);    }
[data-accent="teal"]    { --ring: var(--teal-400);    }
/* sky is default - already set via --ring */