/* Layer order for every stylesheet. Loaded first. icons.css is generated and
   unlayered, so it wins over these layers: size icons with `font-size`
   (they are 1em square), never width/height. */
@layer tokens, base, components, shell, pages;

@layer tokens {
  :root {
    color-scheme: light;

    --bg-0: #ffffff;
    --bg-1: #ffffff;
    --bg-2: #f8fafc;
    --bg-3: #eef2f7;
    --bg-elev: #ffffff;
    --line: rgba(15, 23, 42, 0.075);
    --line-strong: rgba(15, 23, 42, 0.13);

    --fg-0: #1f2937;
    --fg-1: #4b5563;
    --fg-2: #6b7280;
    --fg-3: #9ca3af;

    --accent: #3b82f6;
    --accent-strong: #2563eb;
    --accent-soft: rgba(59, 130, 246, 0.14);
    --accent-glow: rgba(59, 130, 246, 0.35);
    --success: #10b981;
    --success-strong: #059669;
    --success-soft: rgba(16, 185, 129, 0.14);
    --violet: #8b5cf6;
    --violet-soft: rgba(139, 92, 246, 0.14);
    --cyan: #06b6d4;
    --cyan-soft: rgba(6, 182, 212, 0.14);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.14);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.14);

    /* Theme-dependent surfaces (replace per-component light/dark overrides). */
    --glow-1: rgba(59, 130, 246, 0.07);
    --glow-2: rgba(139, 92, 246, 0.05);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --btn-bg: #ffffff;
    --btn-bg-hover: #fbfcfe;
    --btn-border: var(--line-strong);
    --btn-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 40%), #fbfbfd;
    --topbar-bg: rgba(255, 255, 255, 0.74);
    --hover-tint: rgba(15, 23, 42, 0.04);
    --backdrop: rgba(15, 23, 42, 0.4);

    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Type scale: names keep the old px value, sizes are fixed rem. */
    --text-8-5: 0.53125rem;
    --text-9: 0.5625rem;
    --text-9-5: 0.59375rem;
    --text-10: 0.625rem;
    --text-10-5: 0.65625rem;
    --text-11: 0.6875rem;
    --text-11-5: 0.71875rem;
    --text-12: 0.75rem;
    --text-12-5: 0.78125rem;
    --text-13: 0.8125rem;
    --text-13-5: 0.84375rem;
    --text-14: 0.875rem;
    --text-14-5: 0.90625rem;
    --text-15: 0.9375rem;
    --text-16: 1rem;
    --text-17: 1.0625rem;
    --text-18: 1.125rem;
    --text-20: 1.25rem;
    --text-22: 1.375rem;
    --text-24: 1.5rem;
    --text-26: 1.625rem;
    --text-28: 1.75rem;

    --sp-1: 1px;
    --sp-2: 2px;
    --sp-3: 3px;
    --sp-4: 4px;
    --sp-5: 5px;
    --sp-6: 6px;
    --sp-7: 7px;
    --sp-8: 8px;
    --sp-9: 9px;
    --sp-10: 10px;
    --sp-11: 11px;
    --sp-12: 12px;
    --sp-13: 13px;
    --sp-14: 14px;
    --sp-16: 16px;
    --sp-18: 18px;
    --sp-20: 20px;
    --sp-22: 22px;
    --sp-24: 24px;
    --sp-28: 28px;
    --sp-32: 32px;
    --sp-40: 40px;
    --sp-48: 48px;
    --sp-56: 56px;
    --sp-60: 60px;
    --sp-64: 64px;

    --r-4: 4px;
    --r-5: 5px;
    --r-6: 6px;
    --r-7: 7px;
    --r-8: 8px;
    --r-9: 9px;
    --r-10: 10px;
    --r-11: 11px;
    --r-12: 12px;
    --r-14: 14px;
    --r-16: 16px;
    --r-20: 20px;
    --r-full: 999px;
    --r-circle: 50%;

    --z-base: 1;
    --z-sticky: 30;
    --z-modal: 1040;
    --z-dropdown: 1050;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-label: 600;
    --fw-title: 650;
    --fw-display: 650;

    --lh-tight: 1.1;
    --lh-snug: 1.2;
    --lh-normal: 1.45;
    --lh-relaxed: 1.6;

    --dur-fast: 120ms;
    --dur-normal: 140ms;
    --dur-medium: 160ms;
    --dur-slow: 200ms;
    --ease-pop: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);

    --pad-card: var(--sp-16);
    --btn-radius: var(--r-7);
    --card-radius: var(--r-8);
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.18);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.035);
    --shadow-pop: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.055);

    --sidebar-w: 248px;
    --sidebar-mini-w: 68px;
    --shell-header-h: 60px;
  }

  [data-theme="dark"] {
    color-scheme: dark;

    --bg-0: #070b14;
    --bg-1: #0f1623;
    --bg-2: #131b2c;
    --bg-3: #1a2336;
    --bg-elev: #131b2c;
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.13);

    --fg-0: #f1f5f9;
    --fg-1: #cbd5e1;
    --fg-2: #94a3b8;
    --fg-3: #64748b;

    --accent-glow: rgba(59, 130, 246, 0.38);
    --warning-soft: rgba(245, 158, 11, 0.16);

    --glow-1: rgba(59, 130, 246, 0.1);
    --glow-2: rgba(139, 92, 246, 0.08);
    --card-bg: var(--bg-1);
    --input-bg: var(--bg-2);
    --btn-bg: var(--bg-2);
    --btn-bg-hover: var(--bg-3);
    --btn-border: var(--line);
    --btn-shadow: none;
    --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 40%), #0a1020;
    --topbar-bg: rgba(7, 11, 20, 0.72);
    --hover-tint: rgba(255, 255, 255, 0.03);
    --backdrop: rgba(0, 0, 0, 0.6);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card: none;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  }
}