/* styles/tokens.css */
/* All themeable values as CSS variables. Themes override these values. */

:root {
  /* ===== COLORS ===== */
  /* Background colors - deep teal/navy gradient base */
  --color-bg-void: #0a0f0f;
  --color-bg-primary: #0d1214;
  --color-bg-elevated: #141a1c;
  --color-bg-subtle: #1a2224;
  --color-bg-card: #121819;

  /* Text colors */
  --color-text-primary: #e6edf3;
  --color-text-secondary: #b8c4ce;
  --color-text-muted: #8b949e;

  /* Teal - spa teal, cool, calm, interactive */
  --color-teal: #5BBFBA;
  --color-teal-hover: #7dd3cf;
  --color-teal-dim: rgba(91, 191, 186, 0.15);
  --color-teal-glow: rgba(91, 191, 186, 0.3);

  /* Yellow - pigeon yellow, warm, attention */
  --color-yellow: #FFD93D;
  --color-yellow-hover: #ffe566;
  --color-yellow-dim: rgba(255, 217, 61, 0.15);
  --color-yellow-glow: rgba(255, 217, 61, 0.3);

  /* Orange - pigeon beak, very rare */
  --color-orange: #FF8C00;
  --color-orange-dim: rgba(255, 140, 0, 0.15);

  /* Legacy accent mapping to teal */
  --color-accent: var(--color-teal);
  --color-accent-hover: var(--color-teal-hover);
  --color-accent-dim: var(--color-teal-dim);
  --color-accent-glow: var(--color-teal-glow);

  /* Semantic colors */
  --color-success: #68d391;
  --color-warning: var(--color-orange);
  --color-error: #fc8181;

  /* Border colors */
  --color-border: #2a2a2a;
  --color-border-accent: var(--color-accent);

  /* ===== TYPOGRAPHY ===== */
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-hero: clamp(2.5rem, 6vw, 4.5rem);

  /* ===== SPACING ===== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ===== EFFECTS ===== */
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(125, 211, 252, 0.2);
  --glass-bg: rgba(17, 17, 17, 0.9);
  --glass-blur: 20px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ===== LAYOUT ===== */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --header-height: 72px;
}