/* ==========================================================================
   Zenith Focus - Variables & Design Tokens
   Base font-size: 10px (62.5%) -> 1rem = 10px
   Metodología BEM, CSS3 nativo
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Base Light Palette (Rose Quartz / Botanical Zen) */
  --color-bg: #FFF5F7;
  --color-surface: #FFFFFF;
  --color-surface-card: #FDECEF;
  --color-surface-card-hover: #F9DDE4;
  --color-surface-muted: #F7D7DF;
  --color-border: #F3D2DC;
  --color-border-subtle: rgba(194, 24, 91, 0.08);

  --color-text-primary: #3D0C24;
  --color-text-secondary: #9C6F82;
  --color-text-tertiary: #B88E9F;
  --color-overlay: rgba(61, 12, 36, 0.4);

  /* Mode Accents - Default: Pomodoro */
  --mode-accent: #C2185B;
  --mode-accent-rgb: 194, 24, 91;
  --mode-accent-light: #FCE4EC;
  --mode-accent-dark: #880E4F;
  --mode-accent-glow: rgba(194, 24, 91, 0.25);

  /* Specific Mode Palettes */
  --pomodoro-accent: #C2185B;
  --pomodoro-accent-rgb: 194, 24, 91;
  --pomodoro-accent-light: #FCE4EC;

  --short-break-accent: #00A572;
  --short-break-accent-rgb: 0, 165, 114;
  --short-break-accent-light: #E6F8F1;

  --long-break-accent: #6366F1;
  --long-break-accent-rgb: 99, 102, 241;
  --long-break-accent-light: #EEF2FF;

  /* Spacing (1rem = 10px) */
  --space-2xs: 0.4rem;
  --space-xs: 0.8rem;
  --space-sm: 1.2rem;
  --space-md: 1.6rem;
  --space-lg: 2.4rem;
  --space-xl: 3.2rem;
  --space-2xl: 4.8rem;

  /* Border Radii */
  --radius-xs: 0.6rem;
  --radius-sm: 1.0rem;
  --radius-md: 1.6rem;
  --radius-lg: 2.4rem;
  --radius-xl: 3.2rem;
  --radius-full: 999.9rem;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 0.2rem 0.8rem rgba(194, 24, 91, 0.04);
  --shadow-md: 0 0.6rem 2.0rem rgba(194, 24, 91, 0.08);
  --shadow-lg: 0 1.2rem 3.6rem rgba(194, 24, 91, 0.12);
  --shadow-glow: 0 0.8rem 2.4rem rgba(var(--mode-accent-rgb), 0.28);
}

/* Dark Mode Palette */
html.dark {
  --color-bg: #1F0D15;
  --color-surface: #26111B;
  --color-surface-card: #2D1420;
  --color-surface-card-hover: #381B29;
  --color-surface-muted: #451D31;
  --color-border: #451D31;
  --color-border-subtle: rgba(244, 143, 177, 0.12);

  --color-text-primary: #FFF0F4;
  --color-text-secondary: #D4A5B7;
  --color-text-tertiary: #9C6F82;
  --color-overlay: rgba(15, 6, 10, 0.7);

  --mode-accent: #F48FB1;
  --mode-accent-rgb: 244, 143, 177;
  --mode-accent-light: #3D1224;
  --mode-accent-dark: #C2185B;
  --mode-accent-glow: rgba(244, 143, 177, 0.25);

  --pomodoro-accent: #F48FB1;
  --pomodoro-accent-rgb: 244, 143, 177;
  --pomodoro-accent-light: #3D1224;

  --short-break-accent: #4EDEA3;
  --short-break-accent-rgb: 78, 222, 163;
  --short-break-accent-light: #0A3322;

  --long-break-accent: #818CF8;
  --long-break-accent-rgb: 129, 140, 248;
  --long-break-accent-light: #1A1F45;

  --shadow-sm: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.6rem 2.0rem rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 1.2rem 3.6rem rgba(0, 0, 0, 0.6);
}

/* Dynamic State Modes */
body[data-mode="pomodoro"] {
  --mode-accent: var(--pomodoro-accent);
  --mode-accent-rgb: var(--pomodoro-accent-rgb);
  --mode-accent-light: var(--pomodoro-accent-light);
}

body[data-mode="shortBreak"] {
  --mode-accent: var(--short-break-accent);
  --mode-accent-rgb: var(--short-break-accent-rgb);
  --mode-accent-light: var(--short-break-accent-light);
}

body[data-mode="longBreak"] {
  --mode-accent: var(--long-break-accent);
  --mode-accent-rgb: var(--long-break-accent-rgb);
  --mode-accent-light: var(--long-break-accent-light);
}