/* =====================================================================
   Amazona Verse · tokens de diseño
   Este es el ÚNICO archivo que un fork cambia para cambiar la marca.
   ui.css solo usa los tokens semánticos (--c-*, --fs-*, --sp-*, --r-*...).
   Contraste comprobado (WCAG AA): ver docs/UI_SYSTEM.md.
   ===================================================================== */
:root {
  /* ---- 1. Paleta de marca (valores crudos) ---- */
  --night: #10241c;        /* selva de noche: fondo */
  --night-2: #163226;      /* superficie elevada */
  --night-3: #21463a;      /* superficie más alta */
  --leaf: #2f8f4e;         /* verde Vittata */
  --leaf-hi: #7fd38f;
  --beak: #f2a03d;         /* naranja pico: acento principal */
  --beak-hi: #ffc46b;
  --beak-lo: #b8620e;      /* "labio" 3D del botón */
  --crest: #d6403a;        /* rojo frente */
  --crest-lo: #b52f2a;
  --gold: #ffd27a;
  --sky: #7cc6ff;
  --violet: #c9b6ff;
  --paper: #f4f7f1;        /* texto claro */
  --muted: #a9c2b1;        /* texto secundario sobre oscuro */
  --parchment: #fbf1dc;    /* papel: tarjetas, diálogo, diario */
  --parchment-2: #f1e0bb;
  --ink: #2a1d10;          /* tinta sobre papel */
  --ink-muted: #6b5236;
  --wood: #8a5a2b;
  --wood-lo: #5a3818;

  /* ---- 2. Tokens semánticos (lo que usa ui.css) ---- */
  --c-bg: var(--night);
  --c-surface: rgba(12, 30, 22, 0.88);      /* vidrio del HUD */
  --c-surface-solid: #132b21;
  --c-surface-raised: var(--night-3);
  --c-line: rgba(127, 211, 143, 0.28);
  --c-line-strong: rgba(244, 247, 241, 0.42);
  --c-text: var(--paper);
  --c-text-muted: var(--muted);
  --c-eyebrow: var(--gold);

  --c-primary: var(--beak);
  --c-primary-ink: #2b1a05;
  --c-primary-lip: var(--beak-lo);
  --c-success: var(--leaf-hi);
  --c-success-ink: #0e2a18;
  --c-success-lip: #3f9a55;
  --c-info: var(--sky);
  --c-info-ink: #0b2236;
  --c-info-lip: #3f86c2;
  --c-magic: var(--violet);
  --c-magic-ink: #241446;
  --c-magic-lip: #8a73d6;
  --c-danger: var(--crest-lo);
  --c-danger-ink: #ffffff;
  --c-danger-lip: #7d1c18;

  --c-paper: var(--parchment);
  --c-paper-2: var(--parchment-2);
  --c-paper-line: rgba(61, 143, 176, 0.18);   /* renglones del diario */
  --c-paper-margin: rgba(214, 64, 58, 0.45);
  --c-ink: var(--ink);
  --c-ink-muted: var(--ink-muted);
  --c-paper-edge: #d9bf8a;

  --c-focus: #ffe066;              /* anillo de foco sobre oscuro */
  --c-focus-on-paper: #1f5fbf;     /* anillo de foco sobre papel */
  --c-focus-halo: rgba(8, 20, 14, 0.7);
  --c-scrim: rgba(6, 16, 12, 0.62);

  /* Cielo de la pantalla de título */
  --sky-1: #1b1550;
  --sky-2: #3b2c8f;
  --sky-3: #7a55c9;
  --sky-4: #f08a5d;
  --sky-5: #ffc46b;
  --jungle-1: #2c6b45;
  --jungle-2: #1b4a30;
  --jungle-3: #0f2e1e;

  /* ---- 3. Tipografía ---- */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --display: var(--font-display);   /* alias de la versión anterior */
  --body: var(--font-body);
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --tracking-caps: 0.09em;

  /* ---- 4. Espacio (base 4 px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- 5. Radios, bordes y sombras ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --bw: 2px;
  --lip: 4px;                       /* grosor del "labio" de los botones */
  --sh-1: 0 2px 6px rgba(0, 0, 0, 0.25);
  --sh-2: 0 10px 28px rgba(0, 0, 0, 0.35);
  --sh-3: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* ---- 6. Tamaños táctiles ---- */
  --tap: 48px;                      /* mínimo de cualquier control (≥ 44 px) */
  --tap-sm: 44px;
  --tap-lg: 68px;
  --tap-xl: 92px;
  --stick: 136px;

  /* ---- 7. Movimiento ---- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --type-cps: 45;                   /* máquina de escribir: letras por segundo */

  /* ---- 8. Capas ---- */
  --z-hud: 5;
  --z-controls: 6;
  --z-card: 10;
  --z-overlay: 20;
  --z-toast: 30;
  --z-title: 40;

  color-scheme: dark;
}