/**
 * 100x Life Planning System - CSS Variables
 * Brand colors, typography, and design tokens
 */

:root {
  /* 100x Forum Brand Colors - Light theme with navy accents */
  --navy-primary: #1a2b4a;
  --navy-dark: #0f1a2e;
  --navy-medium: #2d4a6f;
  --navy-light: #3d5a80;
  --teal-accent: #4a9bb5;
  --teal-light: #e8f4f8;
  --gold: #c9a227;
  --gold-light: #f5efd6;
  --gold-dark: #a07f1c;

  /* Background colors - Light theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #eef1f4;

  /* Text colors */
  --text-dark: #1a2b4a;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-light: #ffffff;

  /* Borders */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e0;

  /* Legacy mappings for compatibility */
  --navy-darkest: #0f1a2e;
  --cream: #f8f9fa;
  --cream-dark: #e2e8f0;

  /* Typography */
  --font-heading: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.2);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* Dark theme */
[data-theme="dark"] {
  /* Navy colors shift lighter for dark backgrounds */
  --navy-primary: #a8b5c9;
  --navy-dark: #cbd5e0;
  --navy-medium: #8fa3bf;
  --navy-light: #6b8bb5;
  --teal-accent: #5bb8d4;
  --teal-light: #1a3a4a;
  --gold: #d4b545;
  --gold-light: #2a2515;
  --gold-dark: #e8c84a;

  /* Background colors - Dark theme */
  --bg-primary: #1a1f2e;
  --bg-secondary: #141824;
  --bg-tertiary: #232838;

  /* Text colors - inverted for dark */
  --text-dark: #e8ecf4;
  --text-secondary: #a8b5c9;
  --text-muted: #6b7a94;
  --text-light: #1a1f2e;

  /* Borders */
  --border-light: #2d3548;
  --border-medium: #3d4860;

  /* Legacy mappings */
  --navy-darkest: #e8ecf4;
  --cream: #1a1f2e;
  --cream-dark: #2d3548;

  /* Shadows - more prominent in dark mode */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.5);
}