/* =============================================================================
   SEMANTIC TOKENS - Use these in components
   Theme switching happens HERE by remapping to different primitives
   ============================================================================= */

:root {
  /* === Backgrounds === */
  --bg-primary: var(--color-sand-50);
  --bg-secondary: var(--color-sand-100);
  --bg-elevated: var(--color-white);
  --bg-card: var(--color-sand-100);

  /* === Text === */
  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-stone);
  --text-muted: var(--color-pebble);
  --text-inverse: var(--color-white);

  /* === Borders === */
  --border-default: var(--color-sand-200);
  --border-muted: var(--color-sand-300);

  /* === Brand/Accent === */
  --accent: var(--color-sand-500);
  --accent-hover: var(--color-sand-600);
  --accent-text: var(--color-sand-800);
  --accent-glow: rgba(202, 162, 144, 0.6);

  /* === Semantic Status === */
  --success: var(--color-success-600);
  --success-bg: var(--color-success-100);
  --warning: var(--color-warning-500);
  --warning-bg: var(--color-warning-100);
  --error: var(--color-error-600);
  --error-bg: var(--color-error-100);
  --info: var(--color-info-600);
  --info-bg: var(--color-info-100);

  /* === Glassmorphism === */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(202, 162, 144, 0.15);

  /* === Shadows === */
  --shadow-soft: 0 4px 20px -4px rgba(202, 162, 144, 0.2);
  --shadow-medium: 0 8px 40px -8px rgba(202, 162, 144, 0.25);
  --shadow-glow: 0 0 60px -10px rgba(202, 162, 144, 0.4);

  /* === Typography === */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* === Gradients === */
  --bg-gradient: linear-gradient(135deg, var(--color-warm-white) 0%, var(--color-peach-warm) 50%, var(--color-sand-warm) 100%);
  --sidebar-gradient: linear-gradient(180deg, rgba(253, 228, 208, 0.5) 0%, transparent 100%);
}

/* === Dark Theme - Remap semantic to Monokai === */
:root[data-theme="dark"] {
  /* Shadows - dark theme override */
  --shadow-color: 28, 24, 22;

  /* Backgrounds */
  --bg-primary: var(--color-monokai-bg);
  --bg-secondary: var(--color-monokai-surface);
  --bg-elevated: var(--color-monokai-elevated);
  --bg-card: var(--color-monokai-surface);

  /* Text */
  --text-primary: var(--color-monokai-fg);
  --text-secondary: var(--color-monokai-fg-muted);
  --text-muted: var(--color-monokai-fg-subtle);
  --text-inverse: var(--color-monokai-bg);

  /* Borders */
  --border-default: var(--color-monokai-border);
  --border-muted: var(--color-monokai-hover);

  /* Accent - warm sand on dark */
  --accent: var(--color-sand-accent);
  --accent-hover: var(--color-sand-accent-dark);
  --accent-text: var(--color-sand-accent);
  --accent-glow: rgba(232, 184, 152, 0.4);

  /* Semantic - Monokai colors */
  --success: var(--color-monokai-green);
  --success-bg: rgba(169, 220, 118, 0.15);
  --warning: var(--color-monokai-yellow);
  --warning-bg: rgba(255, 216, 102, 0.15);
  --error: var(--color-monokai-pink);
  --error-bg: rgba(255, 97, 136, 0.15);
  --info: var(--color-monokai-cyan);
  --info-bg: rgba(120, 220, 232, 0.15);

  /* Glassmorphism */
  --glass-bg: rgba(54, 47, 41, 0.95);
  --glass-border: rgba(76, 67, 58, 0.8);
  --glass-shadow: 0 8px 32px rgba(28, 24, 22, 0.7);

  /* Shadows */
  --shadow-soft: 0 2px 8px rgba(28, 24, 22, 0.5);
  --shadow-medium: 0 4px 16px rgba(28, 24, 22, 0.6);
  --shadow-glow: 0 0 40px rgba(232, 184, 152, 0.15);

  /* Gradients */
  --bg-gradient: linear-gradient(135deg, var(--color-monokai-bg) 0%, var(--color-monokai-surface) 50%, var(--color-monokai-bg) 100%);
  --sidebar-gradient: linear-gradient(180deg, rgba(232, 184, 152, 0.08) 0%, transparent 100%);
}