/* ============================================================
   AI SandBox — DESIGN TOKENS
   Premium dark system. Apple × Linear × Arc.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap");

:root {
  /* ── Palette ── */
  --ink-0:   #ffffff;
  --ink-1:   #f4f4f5;
  --ink-2:   #a1a1aa;
  --ink-3:   #71717a;
  --ink-4:   #3f3f46;
  --ink-5:   #27272a;
  --ink-6:   #18181b;
  --ink-7:   #0f0f10;
  --ink-8:   #09090b;

  /* Surface layers */  
  --surface-0: rgba(255,255,255,0.03);
  --surface-1: rgba(255,255,255,0.055);
  --surface-2: rgba(255,255,255,0.08);
  --surface-3: rgba(255,255,255,0.12);

  /* Border */
  --border-0: rgba(255,255,255,0.06);
  --border-1: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.16);
  --border-focus: rgba(255,255,255,0.40);

  /* Semantic */
  --bg:       var(--ink-8);
  --bg-panel: var(--ink-7);
  --text:     var(--ink-0);
  --text-soft:  var(--ink-2);
  --text-muted: var(--ink-3);

  /* Accent — single clean cyan-white */
  --accent:        #e4e4e7;
  --accent-dim:    #a1a1aa;
  --accent-glow:   rgba(228,228,231,0.12);

  /* Status */
  --success: #22c55e;
  --error:   #ef4444;
  --warning: #f59e0b;

  /* ── Typography ── */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Fira Code", "Cascadia Code", monospace;

  /* Scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  clamp(48px, 6vw, 80px);

  /* Weight */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

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

  /* ── Radius ── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.6), 0 6px 20px rgba(0,0,0,0.4);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.7), 0 12px 32px rgba(0,0,0,0.5);

  /* ── Motion ── */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-enter:  500ms;

  /* ── Layout ── */
  --sidebar-w:  240px;
  --topbar-h:   64px;
}
/* ============================================================
   LIGHT THEME
============================================================ */

[data-theme="light"] {

  /* Palette */
  --ink-0: #111827;
  --ink-1: #1f2937;
  --ink-2: #374151;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;
  --ink-5: #d1d5db;
  --ink-6: #e5e7eb;
  --ink-7: #f3f4f6;
  --ink-8: #ffffff;

  /* Surfaces */
  --surface-0: rgba(0,0,0,.02);
  --surface-1: rgba(0,0,0,.04);
  --surface-2: rgba(0,0,0,.06);
  --surface-3: rgba(0,0,0,.08);

  /* Borders */
  --border-0: rgba(0,0,0,.05);
  --border-1: rgba(0,0,0,.08);
  --border-2: rgba(0,0,0,.12);
  --border-focus: rgba(0,0,0,.30);

  /* Semantic */
  --bg: var(--ink-8);
  --bg-panel: var(--ink-7);

  --text: var(--ink-0);
  --text-soft: var(--ink-2);
  --text-muted: var(--ink-3);

}
/* ============================================================
   SYSTEM THEME
============================================================ */

@media (prefers-color-scheme: light) {

    [data-theme="system"] {

        --ink-0: #111827;
        --ink-1: #1f2937;
        --ink-2: #374151;
        --ink-3: #6b7280;
        --ink-4: #9ca3af;
        --ink-5: #d1d5db;
        --ink-6: #e5e7eb;
        --ink-7: #f3f4f6;
        --ink-8: #ffffff;

        --surface-0: rgba(0,0,0,.02);
        --surface-1: rgba(0,0,0,.04);
        --surface-2: rgba(0,0,0,.06);
        --surface-3: rgba(0,0,0,.08);

        --border-0: rgba(0,0,0,.05);
        --border-1: rgba(0,0,0,.08);
        --border-2: rgba(0,0,0,.12);
        --border-focus: rgba(0,0,0,.30);

        --bg: var(--ink-8);
        --bg-panel: var(--ink-7);

        --text: var(--ink-0);
        --text-soft: var(--ink-2);
        --text-muted: var(--ink-3);

    }

}

@media (prefers-color-scheme: dark) {

    [data-theme="system"] {

        /* Same values as :root */

        --ink-0: #ffffff;
        --ink-1: #f4f4f5;
        --ink-2: #a1a1aa;
        --ink-3: #71717a;
        --ink-4: #3f3f46;
        --ink-5: #27272a;
        --ink-6: #18181b;
        --ink-7: #0f0f10;
        --ink-8: #09090b;

        --surface-0: rgba(255,255,255,0.03);
        --surface-1: rgba(255,255,255,0.055);
        --surface-2: rgba(255,255,255,0.08);
        --surface-3: rgba(255,255,255,0.12);

        --border-0: rgba(255,255,255,0.06);
        --border-1: rgba(255,255,255,0.10);
        --border-2: rgba(255,255,255,0.16);
        --border-focus: rgba(255,255,255,0.40);

        --bg: var(--ink-8);
        --bg-panel: var(--ink-7);

        --text: var(--ink-0);
        --text-soft: var(--ink-2);
        --text-muted: var(--ink-3);

    }

}

/* ============================================================
   ACCENT COLORS
============================================================ */

[data-accent="white"] {
    --accent: #e4e4e7;
    --accent-dim: #a1a1aa;
    --accent-glow: rgba(228,228,231,.12);
}

[data-accent="blue"] {
    --accent: #2563eb;
    --accent-dim: #3b82f6;
    --accent-glow: rgba(37,99,235,.15);
}

[data-accent="purple"] {
    --accent: #8b5cf6;
    --accent-dim: #a78bfa;
    --accent-glow: rgba(139,92,246,.18);
}

[data-accent="green"] {
    --accent: #22c55e;
    --accent-dim: #4ade80;
    --accent-glow: rgba(34,197,94,.18);
}

[data-accent="orange"] {
    --accent: #f97316;
    --accent-dim: #fb923c;
    --accent-glow: rgba(249,115,22,.18);
}

[data-accent="red"] {
    --accent: #ef4444;
    --accent-dim: #f87171;
    --accent-glow: rgba(239,68,68,.18);
}

[data-accent="gray"] {
    --accent: #6b7280;
    --accent-dim: #9ca3af;
    --accent-glow: rgba(107,114,128,.18);
}