/* ── Fray.run Design Tokens ──────────────────────────── */
/* OKLCH color system from app theme                      */

:root {
  /* Monospace stack */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Display font for section headings */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Border */
  --border-width: 1.5px;

  /* Brand gradient — matches qs-brand-accent in app.css */
  --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary), oklch(0.7 0.15 55));

  /* Glow colors (hex fallbacks for box-shadow where oklch isn't supported) */
  --glow-primary: rgba(100, 108, 255, 0.35);
  --glow-secondary: rgba(255, 0, 255, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ── Dark Theme (default) ─────────────────────────────── */
:root,
[data-theme="dark"] {
  --color-base-100: oklch(25% 0.005 260);
  --color-base-200: oklch(21% 0.005 260);
  --color-base-300: oklch(17% 0.005 260);
  --color-base-content: oklch(95% 0 0);

  --color-primary: oklch(55% 0.215 269);
  --color-primary-content: oklch(96% 0.018 272);

  --color-secondary: oklch(65% 0.2 330);
  --color-secondary-content: oklch(96% 0.01 330);

  --color-accent: oklch(60% 0.25 293);
  --color-neutral: oklch(35% 0.02 260);
  --color-neutral-content: oklch(95% 0 0);

  --color-success: oklch(64% 0.15 160);
  --color-error: oklch(58% 0.22 25);
  --color-warning: oklch(75% 0.15 75);
  --color-info: oklch(58% 0.158 242);

  color-scheme: dark;
}

/* ── Light Theme ──────────────────────────────────────── */
[data-theme="light"] {
  --color-base-100: oklch(98% 0 0);
  --color-base-200: oklch(96% 0.002 270);
  --color-base-300: oklch(92% 0.004 270);
  --color-base-content: oklch(21% 0.006 286);

  --color-primary: oklch(50% 0.215 269);
  --color-primary-content: oklch(98% 0.01 270);

  --color-secondary: oklch(60% 0.2 330);
  --color-secondary-content: oklch(98% 0.01 330);

  --color-accent: oklch(0% 0 0);
  --color-neutral: oklch(40% 0.017 286);
  --color-neutral-content: oklch(98% 0 0);

  --color-success: oklch(55% 0.14 155);
  --color-error: oklch(55% 0.25 18);
  --color-warning: oklch(70% 0.17 60);
  --color-info: oklch(55% 0.214 260);

  color-scheme: light;
}