/* Hallmark · macrostructure: Long Document · genre: editorial · tone: editorial-cálido
 * theme: studied-DNA (source: https://littleplains.com/) · paper oklch(97.5% 0.008 250) · accent oklch(66.4% 0.179 248)
 * display: roman editorial serif (Instrument Serif) · body: neutral grotesque (General Sans) · label/outlier: mono (JetBrains Mono)
 * nav: N9 edge-aligned · footer: Ft5 statement (ocean band) · studied: yes · DNA-source: url
 * observed-fonts: Jjannon Display + Söhne · observed-accent: #0398fa · rhythm: unknown (URL mode)
 */

:root {
  /* ── Superficies ───────────────────────────────────────────
   * ADN Aave (estudiado 2026-09-29): blanco limpio, tinta cálida casi negra
   * (#252228), acento lavanda #978EFF, verde señal #01D062. Fondo blanco,
   * secciones alternas en tinta; la lavanda es LA voz de color de la marca. */
  --color-paper: #ffffff;
  --color-paper-2: #f7f6f8;
  --color-rule: oklch(91% 0.008 300);
  --color-muted: #4a444b;               /* texto secundario AAA (9.4:1) sobre blanco */
  --color-ink: #252228;
  --color-ink-hover: #38323a;
  --color-on-accent: #100d12;           /* texto sobre lavanda: AAA 7.0:1 */

  /* ── Acentos ─────────────────────────────────────────────── */
  --color-accent: #978eff;              /* lavanda Aave: focos, decoración, CTA */
  --color-accent-strong: #4b41e8;      /* lavanda profundo AAA: texto enlazado y foco */
  --color-accent-soft: rgba(151, 142, 255, 0.1);  /* tinte de fondo de CTA secundario */
  --color-green: #01d062;               /* verde señal (puntos de estado) */
  --color-green-strong: #01662f;        /* verde AAA para texto sobre blanco */
  --color-orange: #ff9f4d;              /* categoría practice */
  --color-orange-strong: #7a4a0d;       /* naranja AAA para texto */
  --color-crimson: #e5484d;             /* categoría review */
  --color-crimson-strong: #9e1d22;      /* rojo AAA para texto */

  /* ── Banda oscura del footer (tinta, ya no marina) ───────── */
  --color-ocean: #252228;
  --color-ocean-2: #2f2a31;
  --color-ocean-rule: rgba(255, 255, 255, 0.12);
  --color-ocean-muted: rgba(255, 255, 255, 0.72);
  --color-on-ocean: #ffffff;            /* texto AAA sobre la banda ocean */
  --color-ring: rgba(37, 34, 40, 0.05);   /* anillo hairline de tarjetas */
  --color-mark-bg: rgba(151, 142, 255, 0.16);
  --shadow-banner: 0 8px 32px rgba(16, 13, 18, 0.35);
  --color-code-chip-bg: #f7f6f8;

  /* ── Tema oscuro: mismas tokens, valores invertidos (contraste AAA verificado) ──
   * Activación: [data-theme="dark"] (conmutador) o prefers-color-scheme si el
   * usuario nunca ha elegido. El lavanda sube a #A99DFF para texto AAA sobre tinta. */

  /* ── Sombra susurro (hover de tarjetas) ──────────────────── */
  --shadow-whisper: 0 1px 2px oklch(24% 0.05 250 / 0.08);

  /* ── Resaltado de sintaxis: tema MONOKAI (paleta canónica del tema) ──
   * El bloque de código es una isla oscura sobre el papel: los colores del
   * tema solo son legibles sobre su propio fondo #272822. */
  --tok-bg: #272822;                        /* fondo del bloque */
  --tok-fg: #f8f8f2;                        /* texto base */
  --tok-kw: #ff4d85;                        /* rosa claro: keywords (4.5:1 sobre tok-bg) */
  --tok-str: #e6db74;                       /* amarillo: cadenas */
  --tok-com: #a3987c;                       /* gris claro: comentarios (5.1:1) */
  --tok-num: #ae81ff;                       /* violeta: números */
  --tok-var: #66d9ef;                       /* cian: variables/cabeceras/flags */
  --tok-dec: #a6e22e;                       /* verde: decoradores */

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --font-body: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, monospace;

  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-3xl: 3.0518rem;
  --text-display: clamp(2.25rem, 4vw + 1rem, 4.25rem);

  /* ── Espaciado 4pt ───────────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --page-gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* ── Formas y capas (Aave: píldoras y tarjetas muy redondeadas) ── */
  --radius-card: 32px;
  --radius-2xs: 12px;
  --radius-pill: 999px;
  --rule-hair: 1px;
}

/* ═══ Tema oscuro ═══════════════════════════════════════════
 * Mismos nombres de token, valores invertidos y medidos: cada par texto/fondo
 * mantiene AAA (≥7:1) o AA-grande donde el original lo era. Activación por
 * [data-theme="dark"] en <html>; el bootstrap de main.js lo aplica según
 * preferencia guardada o prefers-color-scheme. */
:root[data-theme="dark"] {
  --color-paper: #17141a;
  --color-paper-2: #201c22;
  --color-rule: rgba(255, 255, 255, 0.14);
  --color-muted: #b5b0b8;               /* AAA 9.0:1 sobre papel oscuro */
  --color-ink: #f2eff2;                 /* AAA 15.2:1 */
  --color-ink-hover: #dcd6de;
  --color-on-accent: #100d12;

  --color-accent: #a99dff;              /* lavanda claro: focos y decoración */
  --color-accent-strong: #b7adff;       /* AAA 9.1:1 sobre papel oscuro: enlaces */
  --color-accent-soft: rgba(169, 157, 255, 0.14);
  --color-green: #35e07e;               /* señal sobre oscuro */
  --color-green-strong: #6fe6a3;        /* AAA 10.1:1 */
  --color-orange: #ffb37a;
  --color-orange-strong: #ffc48f;       /* AAA 11.1:1 */
  --color-crimson: #ff7a7e;
  --color-crimson-strong: #ff9a9d;      /* AAA 9.6:1 */

  --color-ocean: #0e0b10;
  --color-ocean-2: #1b171d;
  --color-ocean-rule: rgba(255, 255, 255, 0.14);
  --color-ocean-muted: rgba(242, 239, 242, 0.78);
  --color-on-ocean: #f2eff2;            /* AAA 16:1 sobre #0e0b10 */

  --color-ring: rgba(255, 255, 255, 0.08);
  --color-mark-bg: rgba(169, 157, 255, 0.24);
  --shadow-banner: 0 8px 32px rgba(0, 0, 0, 0.55);
  --color-code-chip-bg: rgba(255, 255, 255, 0.08);
  --shadow-whisper: 0 1px 2px rgba(0, 0, 0, 0.45);

  --z-raised: 10;
  --z-sticky: 200;

  color-scheme: dark;
}