:root {
  /* HSL Colors: Claro (Papelería) */
  --bg-color: hsl(0, 0%, 98%);
  --bg-color-alt: hsl(0, 0%, 94%);
  --text-color: hsl(210, 15%, 20%);
  --text-color-light: hsl(210, 15%, 40%);
  
  --accent-1: hsl(190, 80%, 45%);
  --accent-1-hover: hsl(190, 80%, 40%);
  --accent-2: hsl(330, 80%, 65%);
  --accent-3: hsl(45, 90%, 55%);
  
  --border-color: hsl(210, 15%, 85%);
  --card-bg: hsl(0, 0%, 100%);
  --modal-bg: rgba(255, 255, 255, 0.95);

  /* Typography */
  --font-title: 'Quicksand', 'Nunito', sans-serif;
  --font-body: 'Inter', 'Plus Jakarta Sans', sans-serif;

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

  /* Border Radius & Shadow */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-round: 50%;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px hsl(190, 80%, 75%);

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

[data-theme="dark"] {
  --bg-color: hsl(210, 20%, 12%);
  --bg-color-alt: hsl(210, 20%, 16%);
  --text-color: hsl(0, 0%, 95%);
  --text-color-light: hsl(0, 0%, 80%);
  
  --accent-1: hsl(190, 80%, 55%);
  --accent-1-hover: hsl(190, 80%, 65%);
  --accent-2: hsl(330, 80%, 70%);
  --accent-3: hsl(45, 90%, 60%);
  
  --border-color: hsl(210, 20%, 25%);
  --card-bg: hsl(210, 20%, 18%);
  --modal-bg: rgba(30, 34, 38, 0.95);
  
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px hsl(190, 80%, 35%);
}