/**
 * Design System Variables
 * 8px grid spacing system
 */

:root {
  /* Spacing - 8px grid (4px exception) */
  --spacing-0-5: 4px; /* Exception - half unit */
  --spacing-1: 8px; /* 1x base grid unit */
  --spacing-2: 16px; /* 2x grid */
  --spacing-3: 24px; /* 3x grid */
  --spacing-4: 32px; /* 4x grid */
  --spacing-5: 40px; /* 5x grid */

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;

  /* Font Sizes - REM scale */
  --font-3xl: 2.5rem; /* 40px - Hero headings */
  --font-2xl: 2rem; /* 32px - Page headings */
  --font-xl: 1.5rem; /* 24px - Section headings, Chinese text */
  --font-lg: 1.25rem; /* 20px - Large body, emphasis */
  --font-base: 1rem; /* 16px - Standard body text */
  --font-sm: 0.875rem; /* 14px - Small text, labels */

  /* Text Colors */
  --color-text-primary: #1a1a1a; /* Emphasis text - Chinese, vocab, key headings */
  --color-text-body: #333; /* Standard text - navigation, labels */
  --color-text-secondary: #444; /* Secondary text - translations, explanations */
  --color-text-muted: #666; /* Tertiary text - metadata, romanization */
  --color-text-disabled: #ccc; /* Disabled states */

  /* Surface Colors */
  --color-surface-base: white; /* Main backgrounds */
  --color-surface-overlay: rgba(255, 255, 255, 0.9); /* Floating UI (footer, back-link) */
  --color-surface-subtle: #f7f7f7; /* Subtle backgrounds */
  --color-surface-accent: #f0f8ff; /* Accent sections (full translation) */

  /* Accent Colors */
  --color-accent-primary: #4a90e2; /* Primary brand blue */
  --color-accent-primary-hover: #3a7bc8; /* Hover state */
  --color-accent-primary-subtle: rgba(74, 144, 226, 0.4); /* 40% opacity variant */

  /* Success Colors */
  --color-success: #2e7d32; /* Green text - available, complete states */
  --color-success-subtle: #e8f5e9; /* Light green background */

  /* Border Colors */
  --color-border-default: #e0e0e0; /* Standard dividers */
  --color-border-accent: #d0e8ff; /* Accent borders */

  /* Effects */
  --color-shadow: rgba(0, 0, 0, 0.2); /* Box shadows */
  --color-hover-overlay: rgba(0, 0, 0, 0.05); /* Interactive hover states */

  /* Border Radius */
  --radius: 4px; /* Standard border radius */

  /* Animations */
  --transition-duration: 0.3s; /* Page transition duration */

  /* Z-index Layers */
  --z-index-nav-menu: 100; /* Navigation menu buttons */
  --z-index-translation-overlay: 200; /* Translation overlay (above menu) */
}