/* JZ Canvas Pro — Variables editables por IA
   Cambia solo este archivo y toda la web muta.
   La IA puede reescribir :root sin tocar HTML.
*/
:root {
  /* === COLORES (60-30-10) === */
  --jz-bg: #0A0A0F;
  --jz-bg-soft: #14141C;
  --jz-bg-card: #1C1C24;
  --jz-primary: #03716F;
  --jz-primary-hover: #02A9A6;
  --jz-primary-glow: rgba(3,113,111,0.35);
  --jz-accent: #FF3B30;
  --jz-accent-2: #FFD60A;
  --jz-text: #E8E8EE;
  --jz-text-muted: #9A9AAF;
  --jz-border: #2A2A35;
  --jz-white: #FFFFFF;

  /* === TIPOGRAFÍA === */
  --jz-font-heading: "Sora", system-ui, -apple-system, sans-serif;
  --jz-font-body: "Inter", "Manrope", system-ui, sans-serif;
  --jz-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* === RADIOS & SOMBRAS === */
  --jz-radius: 16px;
  --jz-radius-lg: 24px;
  --jz-radius-pill: 999px;
  --jz-shadow-soft: 0 8px 32px rgba(0,0,0,0.32);
  --jz-shadow-medium: 0 16px 48px rgba(0,0,0,0.4);
  --jz-shadow-glow: 0 8px 32px var(--jz-primary-glow);

  /* === LAYOUT === */
  --jz-header-h: 72px;
  --jz-content: 1200px;
  --jz-wide: 1400px;

  /* === EASING (premium) === */
  --jz-ease: cubic-bezier(0.16,1,0.3,1);
  --jz-ease-out: cubic-bezier(0.25,0.46,0.45,0.94);

  /* === OVERLAYS === */
  --jz-overlay: linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,0.85) 100%);
}

/* Variación LIGHT — activa añadiendo class="jz-light" al <html> o <body> */
.jz-light,
html.jz-light {
  --jz-bg: #F8F8FC;
  --jz-bg-soft: #FFFFFF;
  --jz-bg-card: #FFFFFF;
  --jz-text: #12121A;
  --jz-text-muted: #6B6B7A;
  --jz-border: #E8E8EE;
  --jz-shadow-soft: 0 8px 32px rgba(0,0,0,0.08);
  --jz-shadow-medium: 0 16px 48px rgba(0,0,0,0.12);
}