/**
 * Savoroo design system — single source of tokens for light/dark themes.
 * Import before app.css and stitch.css in HTML.
 */

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", monospace;
  --text-xs: 0.68rem;
  --text-sm: 0.78rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.15rem;
  --text-2xl: 1.65rem;

  --color-bg: #f0fdfa;
  --color-bg-mesh: radial-gradient(ellipse 90% 60% at 0% -20%, #ccfbf1 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 0%, #fef3c7 0%, transparent 45%);
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-ink: #0f172a;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-accent: #0d9488;
  --color-accent-strong: #0f766e;
  --color-accent-soft: #ccfbf1;
  --color-accent-glow: rgba(13, 148, 136, 0.18);
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-admin: #be123c;
  --color-admin-soft: #ffe4e6;
  --color-success: #15803d;
  --color-success-soft: #dcfce7;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);

  --bg: var(--color-bg);
  --bg-mesh: var(--color-bg-mesh);
  --surface: var(--color-surface);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --accent: var(--color-accent);
  --accent-dark: var(--color-accent-strong);
  --accent-soft: var(--color-accent-soft);
  --accent-glow: var(--color-accent-glow);
  --danger: var(--color-danger);
  --admin: var(--color-admin);
  --admin-soft: var(--color-admin-soft);
  --user: var(--color-success);
  --user-soft: var(--color-success-soft);
  --shadow: var(--shadow-md);
  --radius: var(--radius-md);
  --font: var(--font-sans);
  --page-pad: var(--space-4);
}

[data-theme="dark"] {
  --color-bg: #1a1e24;
  --color-bg-mesh: radial-gradient(ellipse 90% 60% at 0% -20%, rgba(94, 184, 168, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(180, 140, 80, 0.04) 0%, transparent 45%);
  --color-surface: #242a33;
  --color-surface-muted: #2a3038;
  --color-ink: #d4dae3;
  --color-muted: #9aa5b5;
  --color-border: rgba(148, 163, 184, 0.2);
  --color-accent: #6eb8a8;
  --color-accent-strong: #8ecfc2;
  --color-accent-soft: rgba(110, 184, 168, 0.14);
  --color-accent-glow: rgba(110, 184, 168, 0.1);
  --color-danger: #e8a09a;
  --color-danger-soft: rgba(200, 120, 130, 0.12);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.28);
}