/* =========================================================
   Elemental W — Design Tokens
   Base visual compartida de la experiencia.
   No contiene estilos específicos de una página.
   ========================================================= */

:root {
  /* ---------- Paleta oficial: rosa ---------- */
  --ew-palette-pink-surface: #f4939a;
  --ew-palette-pink-accent: #cf4173;
  --ew-palette-pink-background: #f6d8bd;
  --ew-palette-pink-ink: #5d3140;

  /* ---------- Paleta oficial: azul ---------- */
  --ew-palette-blue-surface: #96c6ea;
  --ew-palette-blue-accent: #3db5ce;
  --ew-palette-blue-background: #c0bcde;
  --ew-palette-blue-ink: #31555d;

  /* ---------- Paleta oficial: morado ---------- */
  --ew-palette-purple-surface: #b494c5;
  --ew-palette-purple-accent: #5c53a3;
  --ew-palette-purple-background: #e9bfda;
  --ew-palette-purple-ink: #3b315d;

  /* ---------- Paleta oficial: naranja ---------- */
  --ew-palette-orange-surface: #f5c693;
  --ew-palette-orange-accent: #cf5f3f;
  --ew-palette-orange-background: #f3f4be;
  --ew-palette-orange-ink: #5d3c31;

  /* ---------- Tema activo por defecto ---------- */
  --ew-theme-surface: var(--ew-palette-pink-surface);
  --ew-theme-accent: var(--ew-palette-pink-accent);
  --ew-theme-background: var(--ew-palette-pink-background);
  --ew-theme-ink: var(--ew-palette-pink-ink);

  /* ---------- Superficies (constantes, no dependen de tema) ---------- */
  --ew-color-surface: #ffffff;
  --ew-color-text-inverse: #ffffff;

  /* ---------- Estados semánticos ---------- */
  --ew-color-success: #2f7d5b;
  --ew-color-success-soft: #e9f5ef;

  --ew-color-warning: #a96812;
  --ew-color-warning-soft: #fff4dd;

  --ew-color-danger: #b63d4d;
  --ew-color-danger-soft: #fdecef;

  --ew-color-info: #406f91;
  --ew-color-info-soft: #eaf4fb;

  /* ---------- Superficie educativa tipo cuaderno ---------- */
  --ew-color-paper: #faf7ef;
  --ew-color-paper-grid: #dee7ef;
  --ew-paper-grid-size: 26px;
  --ew-paper-grid-line: 1px;

  /* ---------- Tipografía ---------- */
  --ew-font-display: "Ultra", Georgia, serif;
  --ew-font-heading: "Slabo 27px", Georgia, serif;
  --ew-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  /* ---------- Escala tipográfica ---------- */
  --ew-text-xs: 0.75rem;
  --ew-text-sm: 0.875rem;
  --ew-text-base: 1rem;
  --ew-text-lg: 1.125rem;
  --ew-text-xl: 1.25rem;
  --ew-text-2xl: 1.5rem;
  --ew-text-3xl: 2rem;
  --ew-text-4xl: 2.75rem;

  /* ---------- Espaciado ---------- */
  --ew-space-1: 0.25rem;
  --ew-space-2: 0.5rem;
  --ew-space-3: 0.75rem;
  --ew-space-4: 1rem;
  --ew-space-5: 1.5rem;
  --ew-space-6: 2rem;
  --ew-space-7: 3rem;
  --ew-space-8: 4rem;

  /* ---------- Radios ---------- */
  --ew-radius-sm: 0.5rem;
  --ew-radius-md: 0.875rem;
  --ew-radius-lg: 1.25rem;
  --ew-radius-xl: 1.75rem;
  --ew-radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --ew-shadow-sm: 0 2px 8px rgb(93 49 64 / 8%);
  --ew-shadow-md: 0 8px 24px rgb(93 49 64 / 12%);
  --ew-shadow-lg: 0 18px 48px rgb(93 49 64 / 16%);

  /* ---------- Layout ---------- */
  --ew-container-sm: 42rem;
  --ew-container-md: 64rem;
  --ew-container-lg: 76rem;

  /* ---------- Movimiento ---------- */
  --ew-transition-fast: 150ms ease;
  --ew-transition-base: 220ms ease;
}

/* =========================================================
   Tokens derivados de --ew-theme-* (accent/surface/background/ink)

   Declarados aquí, en `:root, [data-ew-theme]` en vez de solo en
   `:root`, a propósito: si solo vivieran en :root, un elemento
   descendiente con data-ew-theme="orange" (por ejemplo) heredaría
   el valor YA RESUELTO de --ew-color-primary calculado en :root
   (con el tema rosa por defecto), porque las custom properties de
   CSS no se re-evalúan al heredarse — cada var() se resuelve en el
   elemento donde la propiedad fue declarada, no en el elemento que
   la usa. El resultado era que --ew-theme-accent sí cambiaba de
   color por tema, pero --ew-color-primary (y el resto de los
   derivados de abajo) se quedaban siempre con el tono rosa,
   aunque el widget tuviera puesto data-ew-theme="orange".

   Al repetir esta declaración también en el selector
   [data-ew-theme], cualquier elemento con ese atributo la vuelve a
   declarar SOBRE SÍ MISMO, y entonces el var(--ew-theme-accent) de
   adentro se resuelve usando el valor de --ew-theme-accent en ESE
   mismo elemento (que themes.css sí sobreescribe correctamente),
   no el de :root. No duplica las fórmulas de color: sigue siendo
   una sola fuente de verdad en este archivo.
   ========================================================= */
:root,
[data-ew-theme] {
  /* ---------- Alias de compatibilidad ---------- */
  --ew-color-cream: var(--ew-theme-background);
  --ew-color-coral: var(--ew-theme-surface);
  --ew-color-magenta: var(--ew-theme-accent);
  --ew-color-plum: var(--ew-theme-ink);

  /* ---------- Superficies dependientes de tema ---------- */
  --ew-color-background: color-mix(
    in srgb,
    var(--ew-theme-background) 38%,
    white
  );
  --ew-color-surface-soft: color-mix(
    in srgb,
    var(--ew-theme-background) 52%,
    white
  );

  /* ---------- Texto ---------- */
  --ew-color-text: var(--ew-theme-ink);
  --ew-color-text-muted: color-mix(
    in srgb,
    var(--ew-theme-ink) 72%,
    white
  );

  /* ---------- Bordes ---------- */
  --ew-color-border: color-mix(
    in srgb,
    var(--ew-theme-ink) 18%,
    white
  );
  --ew-color-border-strong: color-mix(
    in srgb,
    var(--ew-theme-ink) 32%,
    white
  );

  /* ---------- Acción principal ---------- */
  --ew-color-primary: var(--ew-theme-accent);
  --ew-color-primary-hover: color-mix(
    in srgb,
    var(--ew-theme-accent) 86%,
    black
  );
  --ew-color-primary-soft: color-mix(
    in srgb,
    var(--ew-theme-surface) 24%,
    white
  );

  --ew-color-focus: var(--ew-theme-accent);
}