/* =========================================================================
   VANTO · Design tokens
   Dos capas. Los primitivos son materia prima y nunca se usan directo en un
   componente. Los semanticos son roles y son los unicos que tocan la UI.

   UN SOLO MUNDO: OSCURO
   No hay tema claro ni conmutador. Eso cambia la regla de marca: antes era
   "cobalto sobre claro, brasa sobre oscuro" y el ritmo de la pagina se hacia
   alternando papel y tinta. Ahora el ritmo se hace con PROFUNDIDAD -cinco
   niveles de negro- y brasa es el unico color de accion. Cobalto sobrevive
   como acento frio para lo informativo, nunca para lo que se pulsa.
   ========================================================================= */

/* ---------- 1. PRIMITIVOS ---------- */
:root{
  /* Escalera de profundidad. El orden importa: cada peldano es una capa
     mas cerca del lector. */
  --ink-1000:#06080B;   /* fondo del hero, el mas hondo */
  --ink-950:#0A0D11;    /* fondo de pagina */
  --ink-900:#0E1218;    /* banda alterna */
  --ink-850:#12171F;    /* tarjeta */
  --ink-800:#171D26;    /* tarjeta elevada */
  --ink-700:#1F2731;    /* linea */
  --ink-600:#2A333F;    /* linea marcada */
  --ink-500:#3C4855;
  --ink-400:#5F6B79;    /* borde de control · 3.12:1 sobre --ink-800 */
  --ink-300:#8B96A3;    /* texto apagado */
  --ink-200:#B6BFC9;    /* texto secundario */
  --ink-100:#DDE3EA;
  --blanco:#F2F5F8;     /* texto principal */

  /* Brasa · el unico color de accion */
  --ember-700:#C24313;
  --ember-600:#E2521A;
  --ember-500:#FF6A2B;
  --ember-400:#FF8452;
  --ember-300:#FFB08A;

  /* Cobalto · acento frio, solo informativo */
  --cobalt-500:#3A63FF;
  --cobalt-400:#5B82FF;

  /* Estado */
  --green-400:#35C98A;
  --red-400:#FF6B57;

  /* Espaciado */
  --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;  --space-10:128px;

  /* Radios */
  --radius-sm:4px;
  --radius:8px;
  --radius-lg:14px;
  --radius-xl:22px;
  --radius-full:999px;

  /* Escala tipografica · fluida */
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem);
  --text-2xl:clamp(1.5rem, 1.32rem + 0.9vw, 2.05rem);
  --text-3xl:clamp(2rem, 1.63rem + 1.85vw, 3.15rem);
  --text-4xl:clamp(2.5rem, 1.83rem + 3.35vw, 4.6rem);
  --text-5xl:clamp(3rem, 1.9rem + 5.5vw, 6.4rem);

  /* Tipografias */
  --font-display:'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Work Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.46,.64,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms;
  --dur:260ms;
  --dur-slow:520ms;

  /* Contenedor */
  --page:1200px;
  /* Alto de la cabecera fija. Es un token porque lo usan tres reglas: el
     minimo del nav, el desplazamiento del menu movil y el margen de anclaje
     de las secciones. Si se cambia en un solo sitio, se descuadran las otras. */
  --h-cabecera:70px;
  --gutter:clamp(20px, 5vw, 40px);

  /* Profundidad 3D. Un solo punto de fuga para toda la pagina: si cada
     componente elige el suyo, las piezas parecen de escenas distintas. */
  --perspectiva:1400px;
}

/* ---------- 2. SEMANTICOS ---------- */
:root{
  --color-bg:var(--ink-950);
  --color-bg-deep:var(--ink-1000);
  --color-bg-alt:var(--ink-900);
  --color-surface:var(--ink-850);
  --color-surface-2:var(--ink-800);

  --color-text:var(--blanco);
  --color-text-soft:var(--ink-200);
  --color-text-muted:var(--ink-300);

  --color-rule:var(--ink-700);
  --color-rule-strong:var(--ink-600);
  /* Borde de CONTROL. Distinto de --color-rule a proposito: --color-rule
     separa bloques y puede ser tenue porque es decorativo; este dibuja el
     limite de algo con lo que se interactua y WCAG 1.4.11 le exige 3:1.
     Calculado contra el fondo mas exigente, que es --color-surface-2. */
  --color-border-control:var(--ink-400);

  --color-primary:var(--ember-500);
  --color-primary-hover:var(--ember-400);
  --color-on-primary:var(--ink-950);
  --color-primary-soft:rgba(255,106,43,.13);

  /* Acento frio. Informativo, nunca accion: si algo es cobalto, no se pulsa. */
  --color-accent:var(--cobalt-400);
  --color-accent-soft:rgba(91,130,255,.14);

  --color-ok:var(--green-400);
  --color-alert:var(--red-400);
  --color-focus:var(--ember-500);

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 10px 30px -10px rgba(0,0,0,.7);
  --shadow-lg:0 28px 64px -28px rgba(0,0,0,.85);
  --glow:0 0 0 1px rgba(255,106,43,.28), 0 12px 44px -14px rgba(255,106,43,.42);

  /* Al no haber conmutador, se le dice al navegador que pinte de oscuro sus
     propios controles: barras de scroll, menus de select, autorrelleno. */
  color-scheme:dark;
}