/* =============================================================================
   PRIMITIVES - Raw color values
   NEVER use these directly in components!
   ============================================================================= */

:root {
  /* === Base Colors === */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* === Sand Palette (Day Theme Base) === */
  --color-sand-50: #FFFCF9;
  --color-sand-100: #FFF8F2;
  --color-sand-200: #FFEDE0;
  --color-sand-300: #FFE8D0;
  --color-sand-400: #D4B5A5;
  --color-sand-500: #CAA290;
  --color-sand-600: #B89080;
  --color-sand-700: #9A7A65;
  --color-sand-800: #7D5F4C;
  --color-sand-900: #5E4232;

  /* === Cream/Peach === */
  --color-cream: #FFF8F0;
  --color-cream-warm: #FFF5EB;
  --color-peach: #FFE8D0;
  --color-peach-soft: #FFF5F0;
  --color-peach-warm: #FDE4D0;
  --color-taupe: #B5A091;
  --color-warm-white: #FEF6F0;
  --color-sand-warm: #E4DCD1;

  /* === Sand Accent (for dark theme) === */
  --color-sand-accent: #E8B898;
  --color-sand-accent-dark: #C9A080;

  /* === Text Colors (Day) === */
  --color-charcoal: #3D3633;
  --color-stone: #6B6460;
  --color-pebble: #736E6A; /* Darkened for WCAG 4.5:1 contrast */

  /* === Monokai Pro Palette (Night Theme) === */
  --color-monokai-bg: #1C1816;
  --color-monokai-surface: #2B2521;
  --color-monokai-elevated: #362F29;
  --color-monokai-hover: #413931;
  --color-monokai-border: #4C433A;
  --color-monokai-fg: #FBF8F3;
  --color-monokai-fg-muted: #C8C3BC;
  --color-monokai-fg-subtle: #9A958E;

  /* === Monokai Accents === */
  --color-monokai-green: #A9DC76;
  --color-monokai-yellow: #FFD866;
  --color-monokai-orange: #FC9867;
  --color-monokai-pink: #FF6188;
  --color-monokai-purple: #AB9DF2;
  --color-monokai-cyan: #78DCE8;

  /* === Semantic Raw === */
  /* All colors adjusted for WCAG 4.5:1 contrast on their -100 backgrounds */
  --color-success-600: #047857; /* Darkened for contrast on #D1FAE5 */
  --color-success-100: #D1FAE5;
  --color-warning-500: #B45309; /* Darkened for contrast on #FEF3C7 */
  --color-warning-100: #FEF3C7;
  --color-error-600: #B91C1C; /* Darkened for contrast on #FEE2E2 */
  --color-error-100: #FEE2E2;
  --color-info-600: #1D4ED8; /* Darkened for contrast on #DBEAFE */
  --color-info-100: #DBEAFE;

  /* === Special === */
  --color-gold: #D4AF37;
  --color-gold-light: #F4E4BC;
  --color-rose: #E8C4C4;

  /* === Spacing Scale === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* === Border Radius === */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* === Typography Sizes === */
  --text-size-xs: 0.75rem;
  --text-size-sm: 0.875rem;
  --text-size-base: 1rem;
  --text-size-lg: 1.125rem;
  --text-size-xl: 1.25rem;
  --text-size-2xl: 1.5rem;
  --text-size-3xl: 1.875rem;

  /* === Font Weights === */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === Line Heights === */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* === Z-index === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* === Shadows === */
  --shadow-color: 202, 162, 144;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.05);
  --shadow-md: 0 4px 6px rgba(var(--shadow-color), 0.1);
  --shadow-lg: 0 10px 15px rgba(var(--shadow-color), 0.15);
  --shadow-xl: 0 20px 25px rgba(var(--shadow-color), 0.2);
}