/* Feminismo en corto — tokens de diseño.
   Fuente de verdad: DESIGN.md. Las páginas usan estos nombres, nunca valores sueltos. */

:root {
  color-scheme: light;

  /* Neutros */
  --bg: #FFF8EE;            /* fondo de página (crema) */
  --bg-2: #FFF1DC;          /* banda alterna de sección */
  --surface: #FFFFFF;       /* tarjetas, inputs */
  --surface-2: #F7EDFF;     /* tarjeta con tinte violeta */
  --ink: #21182E;           /* texto principal, bloques oscuros */
  --muted: #5E546E;         /* texto secundario */
  --line: #EADBC8;          /* bordes decorativos de tarjeta */
  --line-strong: #8C7B66;   /* bordes de inputs y controles (3:1) */

  /* Primario: acciones y enlaces */
  --primary: #5B2D90;
  --on-primary: #FFFFFF;
  --primary-soft: #EFE6FF;

  /* Bloque de marca: hero, banner, footer */
  --block: #3A1A63;
  --on-block: #FFF6E8;
  --on-block-muted: #EDE4FF;

  /* Acento único: CTA sobre bloque, resaltados, progreso */
  --accent: #E9B44C;
  --on-accent: #231603;
  --accent-soft: #FFF0BF;

  /* Estados */
  --success: #147A48;
  --success-text: #0E5C35;
  --success-soft: #DFF2E4;
  --danger: #C22E2E;
  --danger-soft: #FFE3E0;
  --danger-block: #C22E2E;  /* franja de emergencia 911 */
  --on-danger-block: #FFFFFF;
  --warning-soft: #FFF0BF;
  --warning-line: #E9B44C;

  /* Serie de datos: SOLO línea de tiempo y tarjetas de olas. Texto blanco encima. */
  --wave-0: #8A5E00;
  --wave-1: #5B2D90;
  --wave-2: #147A48;
  --wave-3: #C24E14;
  --wave-4: #2E1A52;
  --wave-5: #0E6B6B;

  /* Tipografía */
  --font-sans: "Archivo", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --text-display: clamp(2.75rem, 9vw, 5.5rem);
  --text-h2: clamp(2rem, 6vw, 3.5rem);
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-lead: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --leading-display: 0.92;
  --leading-heading: 1.15;
  --leading-body: 1.55;
  --weight-body: 500;
  --weight-strong: 700;
  --weight-heading: 800;
  --weight-display: 900;

  /* Espaciado (base 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-gap: clamp(64px, 10vw, 96px);
  --content-width: 1120px;
  --measure: 640px;
  --gutter: 16px;

  /* Forma y profundidad */
  --radius-s: 12px;     /* cajas internas, iconos */
  --radius-m: 20px;     /* tarjetas */
  --radius-l: 28px;     /* hero y bloques grandes */
  --radius-pill: 999px; /* botones, chips, inputs */
  --shadow: 0 10px 30px rgba(58, 26, 99, .10);       /* solo tarjetas clicables */
  --shadow-hover: 0 18px 40px rgba(58, 26, 99, .16);
  --img-filter: none;   /* las ilustraciones se atenúan en modo noche */

  /* Movimiento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;   /* hover, pulsación */
  --dur-base: 250ms;   /* tarjetas, chips, tema */
  --dur-slow: 500ms;   /* entradas al hacer scroll, cambio de vista */
  --lift: -4px;
  --hit: 44px;         /* tamaño mínimo táctil */
}

/* Oscuro: por preferencia del sistema, salvo que la persona elija "Día" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171221; --bg-2: #1E172E; --surface: #241B36; --surface-2: #2B2142;
    --ink: #F7F0E6; --muted: #C9BDD8; --line: #3A2E52; --line-strong: #7A6B99;
    --primary: #B99CFF; --on-primary: #171221; --primary-soft: #33244F;
    --block: #2B1A4D; --on-block: #FFF6E8; --on-block-muted: #EDE4FF;
    --accent: #FFD166; --on-accent: #231603; --accent-soft: #3D331A;
    --success: #5ED69A; --success-text: #8BE8B8; --success-soft: #173D2A;
    --danger: #FF8A80; --danger-soft: #452020;
    --danger-block: #7E1F1F; --on-danger-block: #FFFFFF;
    --warning-soft: #3D331A; --warning-line: #FFD166;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-hover: 0 18px 40px rgba(0, 0, 0, .5);
    --img-filter: brightness(.86) saturate(.95);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171221; --bg-2: #1E172E; --surface: #241B36; --surface-2: #2B2142;
  --ink: #F7F0E6; --muted: #C9BDD8; --line: #3A2E52; --line-strong: #7A6B99;
  --primary: #B99CFF; --on-primary: #171221; --primary-soft: #33244F;
  --block: #2B1A4D; --on-block: #FFF6E8; --on-block-muted: #EDE4FF;
  --accent: #FFD166; --on-accent: #231603; --accent-soft: #3D331A;
  --success: #5ED69A; --success-text: #8BE8B8; --success-soft: #173D2A;
  --danger: #FF8A80; --danger-soft: #452020;
  --danger-block: #7E1F1F; --on-danger-block: #FFFFFF;
  --warning-soft: #3D331A; --warning-line: #FFD166;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, .5);
  --img-filter: brightness(.86) saturate(.95);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --lift: 0px; }
}