:root {
  /* === B · CLARA NEUTRA (por defecto) === */
  --color-bg-body: #FAFAF8;
  --color-bg-card: #FFFFFF;
  --color-bg-surface: #F5F4F0;
  --color-bg-highlight: rgba(139, 117, 48, 0.06);

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #444444;
  --color-text-muted: #666666;
  --color-text-hint: #888888;

  --color-border-default: #D0CCC0;
  --color-border-light: #E0DDD6;

  --color-accent-gold: #7A6628;
  --color-accent-gold-light: #8B7530;
  --color-accent-gold-bg: rgba(139, 117, 48, 0.06);
  --color-accent-gold-border: rgba(139, 117, 48, 0.20);

  --color-accent-silver: #444444;
  --color-accent-silver-light: #666666;

  --color-btn-primary-bg: #2C2C2A;
  --color-btn-primary-text: #FAFAF8;
  --color-btn-secondary-bg: #777777;
  --color-btn-secondary-text: #FAFAF8;
  --color-btn-outline-border: #D0CEC7;
  --color-btn-outline-text: #555555;

  --color-whatsapp: #25D366;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Tipografía */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Tamaños */
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 0.9375rem;
  --text-xl: 1.0625rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.5rem;
  --text-4xl: 2rem;

  /* Espaciado */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* Bordes */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Layout */
  --max-width: 1140px;
  --max-width-narrow: 720px;
  --header-height: 60px;
}

/* ================================================
   A · AZUL PAPEL + AZUL PROFUNDO
   ================================================ */
body.theme-a {
  --color-bg-body: #EBF0F8;
  --color-bg-card: #FFFFFF;
  --color-bg-surface: #E4EBF5;
  --color-bg-highlight: rgba(30, 72, 112, 0.06);

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #444444;
  --color-text-muted: #666666;
  --color-text-hint: #888888;

  --color-border-default: rgba(30, 72, 112, 0.20);
  --color-border-light: rgba(30, 72, 112, 0.10);

  --color-accent-gold: #7A6628;
  --color-accent-gold-light: #8B7530;
  --color-accent-gold-bg: rgba(30, 72, 112, 0.06);
  --color-accent-gold-border: rgba(30, 72, 112, 0.28);

  --color-accent-silver: #5a5a5a;
  --color-accent-silver-light: #777777;

  --color-btn-primary-bg: #1E4870;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-secondary-bg: #6a6a6a;
  --color-btn-secondary-text: #FFFFFF;
  --color-btn-outline-border: rgba(30, 72, 112, 0.15);
  --color-btn-outline-text: #444444;

  --shadow-card: 0 1px 4px rgba(30, 72, 112, 0.07);
  --shadow-hover: 0 2px 8px rgba(30, 72, 112, 0.10);
}

/* ================================================
   C · CREMA + VERDE CAZA
   ================================================ */
body.theme-c {
  --color-bg-body: #F5F2EB;
  --color-bg-card: #FDFBF6;
  --color-bg-surface: #F0EDE4;
  --color-bg-highlight: rgba(26, 71, 48, 0.06);

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #444444;
  --color-text-muted: #666666;
  --color-text-hint: #888888;

  --color-border-default: rgba(26, 71, 48, 0.18);
  --color-border-light: rgba(26, 71, 48, 0.10);

  --color-accent-gold: #1A4730;
  --color-accent-gold-light: #265C3E;
  --color-accent-gold-bg: rgba(26, 71, 48, 0.06);
  --color-accent-gold-border: rgba(26, 71, 48, 0.28);

  --color-accent-silver: #5a5a5a;
  --color-accent-silver-light: #777777;

  --color-btn-primary-bg: #1A4730;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-secondary-bg: #6a6a6a;
  --color-btn-secondary-text: #FFFFFF;
  --color-btn-outline-border: rgba(26, 71, 48, 0.18);
  --color-btn-outline-text: #444444;

  --shadow-card: 0 1px 4px rgba(26, 71, 48, 0.07);
  --shadow-hover: 0 2px 8px rgba(26, 71, 48, 0.10);
}

/* ================================================
   D · BLANCA PURA CON NEGRO
   ================================================ */
body.theme-d {
  --color-bg-body: #FFFFFF;
  --color-bg-card: #F7F7F7;
  --color-bg-surface: #F2F2F2;
  --color-bg-highlight: rgba(138, 114, 16, 0.04);

  --color-text-primary: #111111;
  --color-text-secondary: #444444;
  --color-text-muted: #666666;
  --color-text-hint: #888888;

  --color-border-default: #D8D8D8;
  --color-border-light: #E8E8E8;

  --color-accent-gold: #8A7210;
  --color-accent-gold-light: #B8960F;
  --color-accent-gold-bg: rgba(138, 114, 16, 0.04);
  --color-accent-gold-border: rgba(138, 114, 16, 0.12);

  --color-accent-silver: #333333;
  --color-accent-silver-light: #777777;

  --color-btn-primary-bg: #111111;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-secondary-bg: #888888;
  --color-btn-secondary-text: #FFFFFF;
  --color-btn-outline-border: #E0E0E0;
  --color-btn-outline-text: #555555;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ================================================
   F · ARENA CÁLIDA
   ================================================ */
body.theme-f {
  --color-bg-body: #F5F0E8;
  --color-bg-card: #FEFCF6;
  --color-bg-surface: #EDE8DD;
  --color-bg-highlight: rgba(92, 74, 30, 0.06);

  --color-text-primary: #3A2E14;
  --color-text-secondary: #5C4A1E;
  --color-text-muted: #7A6A40;
  --color-text-hint: #9A8A68;

  --color-border-default: #CCC4B0;
  --color-border-light: #DDD5C5;

  --color-accent-gold: #6B5820;
  --color-accent-gold-light: #8B7530;
  --color-accent-gold-bg: rgba(92, 74, 30, 0.06);
  --color-accent-gold-border: rgba(92, 74, 30, 0.15);

  --color-accent-silver: #555555;
  --color-accent-silver-light: #777777;

  --color-btn-primary-bg: #5C4A1E;
  --color-btn-primary-text: #F5F0E8;
  --color-btn-secondary-bg: #8A8070;
  --color-btn-secondary-text: #F5F0E8;
  --color-btn-outline-border: #D0C8B5;
  --color-btn-outline-text: #6B5820;

  --shadow-card: 0 1px 3px rgba(58, 46, 20, 0.06);
  --shadow-hover: 0 2px 8px rgba(58, 46, 20, 0.10);
}

/* ================================================
   G · BLANCO + VINO LOGO (#5C0A15)
   Color extraído del logo. Fondo blanco limpio,
   acentos en burdeos profundo del logo.
   ================================================ */
body.theme-g {
  --color-bg-body: #FAFAFA;
  --color-bg-card: #FFFFFF;
  --color-bg-surface: #F5F4F4;
  --color-bg-highlight: rgba(92, 10, 21, 0.06);

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #444444;
  --color-text-muted: #666666;
  --color-text-hint: #888888;

  --color-border-default: rgba(92, 10, 21, 0.18);
  --color-border-light: rgba(92, 10, 21, 0.10);

  --color-accent-gold: #5C0A15;
  --color-accent-gold-light: #7A1020;
  --color-accent-gold-bg: rgba(92, 10, 21, 0.06);
  --color-accent-gold-border: rgba(92, 10, 21, 0.28);

  --color-accent-silver: #5a5a5a;
  --color-accent-silver-light: #777777;

  --color-btn-primary-bg: #5C0A15;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-secondary-bg: #6a6a6a;
  --color-btn-secondary-text: #FFFFFF;
  --color-btn-outline-border: rgba(92, 10, 21, 0.18);
  --color-btn-outline-text: #444444;

  --shadow-card: 0 1px 4px rgba(92, 10, 21, 0.07);
  --shadow-hover: 0 2px 8px rgba(92, 10, 21, 0.10);
}

/* ================================================
   H · CARBÓN + DORADO CÁLIDO
   ================================================ */
body.theme-h {
  --color-bg-body: #1C1C1A;
  --color-bg-card: #242422;
  --color-bg-surface: #202020;
  --color-bg-highlight: rgba(197, 162, 77, 0.08);

  --color-text-primary: #E8E6E0;
  --color-text-secondary: #AAAAAA;
  --color-text-muted: #666666;
  --color-text-hint: #444444;

  --color-border-default: rgba(197, 162, 77, 0.22);
  --color-border-light: rgba(197, 162, 77, 0.12);

  --color-accent-gold: #C5A24D;
  --color-accent-gold-light: #D4B460;
  --color-accent-gold-bg: rgba(197, 162, 77, 0.08);
  --color-accent-gold-border: rgba(197, 162, 77, 0.22);

  --color-accent-silver: #CCCCCC;
  --color-accent-silver-light: #AAAAAA;

  --color-btn-primary-bg: #C5A24D;
  --color-btn-primary-text: #1C1C1A;
  --color-btn-secondary-bg: #383836;
  --color-btn-secondary-text: #E8E6E0;
  --color-btn-outline-border: rgba(197, 162, 77, 0.22);
  --color-btn-outline-text: #AAAAAA;

  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.35);
}