/* ==========================================================================
   CEK · Design Tokens
   Fuente de verdad: DESIGN.md v1.1 (Manual de Identidad CEK)
   - Ámbar de marca verificado por píxel: #FFBB17
   - Tipografía oficial: Montserrat
   El switch del header alterna [data-theme="dark"] (default) y [data-theme="light"].
   ========================================================================== */

:root {
  /* --- Marca (constantes, no cambian con el tema) --- */
  --brand-amber:        #FFBB17;
  --brand-amber-600:    #E6A400;   /* hover/press */
  --brand-amber-100:    rgba(255, 187, 23, 0.15);
  --on-amber:           #000000;   /* texto sobre ámbar (máximo contraste, on-brand) */

  --brand-black:        #000000;
  --brand-charcoal:     #303840;
  --brand-gray:         #EAEAEA;
  --brand-white:        #FFFFFF;
  --brand-blue:         #1973C1;
  --brand-green:        #1EA84A;

  /* Plataforma / semánticos puntuales */
  --whatsapp:           #25D366;
  --whatsapp-600:       #1FB855;
  --cfe-red:            #EF4444;   /* "SIN paneles" */
  --cfe-green:          #22C55E;   /* "CON paneles" */

  /* --- Tipografía --- */
  --font-brand: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Escala fluida (mobile -> desktop con clamp) */
  --fs-display: clamp(2.75rem, 8vw + 0.5rem, 4.5rem);   /* 44 -> 72 */
  --fs-h1:      clamp(1.75rem, 4vw + 0.5rem, 2.75rem);  /* 28 -> 44 */
  --fs-h2:      clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  --fs-h3:      clamp(1.125rem, 1vw + 0.75rem, 1.5rem); /* 18 -> 24 */
  --fs-body:    clamp(0.9375rem, 0.3vw + 0.875rem, 1.0625rem); /* 15 -> 17 */
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.6;

  /* --- Espaciado / layout --- */
  --container-max: 1200px;
  --container-pad: 20px;          /* mobile */
  --section-gap: 56px;            /* padding vertical secciones (mobile) */

  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-pill: 100px;

  --gap-cards: 20px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-amber: 0 10px 40px rgba(255, 187, 23, 0.18);
  --shadow-wa: 0 6px 24px rgba(37, 211, 102, 0.40);

  /* --- Transiciones --- */
  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;

  /* Z-index */
  --z-nav: 100;
  --z-overlay: 200;
  --z-float: 90;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 40px;
    --section-gap: 72px;
    --gap-cards: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 80px;
    --section-gap: 96px;
    --gap-cards: 32px;
  }
}

/* ==========================================================================
   TEMA OSCURO (default)
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #000000;
  --bg-elevated:   #14181E;   /* secciones alternas / charcoal refinado */
  --surface:       #14181E;   /* cards sobre oscuro */
  --surface-2:     rgba(255, 255, 255, 0.05);
  --surface-border: rgba(255, 187, 23, 0.20);

  --text:          #FFFFFF;
  --text-muted:    #C8C8C8;
  --text-subtle:   #8A93A0;
  --border:        rgba(255, 255, 255, 0.10);
  --divider:       #2A2F36;

  --input-bg:      #FFFFFF;
  --input-text:    #14181E;
  --input-border:  #D6DAE0;

  /* Hero: velo oscuro sobre la foto + glow ámbar.
     Más fuerte a la izquierda (donde va el texto) y al fondo (para fundir con la
     sección siguiente); más ligero arriba/derecha para dejar respirar la foto. */
  --hero-overlay:
    linear-gradient(180deg, rgba(0,0,0,0) 55%, #000 100%),
    linear-gradient(105deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.66) 38%, rgba(0,0,0,0.34) 72%, rgba(0,0,0,0.22) 100%);
  --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(255,187,23,0.18) 0%, rgba(255,187,23,0) 70%);

  --nav-bg: rgba(0, 0, 0, 0.80);

  /* Ámbar usado como TEXTO (sobre oscuro el ámbar de marca tiene buen contraste) */
  --amber-text: var(--brand-amber);

  /* Logo a usar (se intercambia por JS según tema) */
  --logo: url('../logos/cek-wordmark-white.png');
}

/* ==========================================================================
   TEMA CLARO
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #FFFFFF;
  --bg-elevated:   #F4F5F6;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-border: #E5E7EB;

  --text:          #14181E;
  --text-muted:    #5B636E;
  --text-subtle:   #8A93A0;
  --border:        #E5E7EB;
  --divider:       #E5E7EB;

  --input-bg:      #FFFFFF;
  --input-text:    #14181E;
  --input-border:  #D6DAE0;

  --hero-overlay:
    linear-gradient(180deg, rgba(255,255,255,0) 55%, #FFFFFF 100%),
    linear-gradient(105deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 38%, rgba(255,255,255,0.52) 72%, rgba(255,255,255,0.40) 100%);
  --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(255,187,23,0.22) 0%, rgba(255,187,23,0) 70%);

  --nav-bg: rgba(255, 255, 255, 0.82);

  /* Sobre fondo claro el ámbar de marca pierde contraste (DESIGN.md §07):
     para TEXTO usamos un dorado más oscuro y legible (cumple WCAG AA). */
  --amber-text: #8A5A00;

  --logo: url('../logos/cek-wordmark-black.png');
}

/* Footer: ancla oscura en ambos temas (convención CEK) */
:root {
  --footer-bg: #0A0D11;
  --footer-text: #FFFFFF;
  --footer-muted: #9AA3AF;
}