/* ============================================================
   Efrain Garay — design tokens (CSS custom properties)
   Dark-first + light. Single source of truth. MIT.
   Uso: importa este archivo y estila SIEMPRE vía var(--role).
   ============================================================ */
:root{
  /* ---- brand ramp (fijo) ---- */
  --teal:#3ECF8E; --violet:#A98BFF; --peri:#8B9DF0;
  --blue:#5AA9FF; --amber:#E8B446; --red:#FF5C6C;
  --ink:#E8EEF7;  --mute:#6B7A90;

  /* ---- type ---- */
  --font-sans:"Hanken Grotesk Variable",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono Variable","SF Mono","Menlo",ui-monospace,monospace;
  --font-display:"JetBrains Mono Variable",ui-monospace,"SF Mono",monospace;
  --font-serif:"Newsreader Variable",Georgia,"Times New Roman",serif;
  --fw-body:400; --fw-med:600; --fw-bold:800; --fw-black:900;
  --fs-display:56px; --fs-title:38px; --fs-heading:26px; --fs-body:17px; --fs-label:13px; --fs-data:15px;

  /* ---- radius / shadow ---- */
  --r-xs:6px; --r-sm:9px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --e-1:0 1px 2px rgba(0,0,0,.4);
  --e-2:0 6px 20px rgba(0,0,0,.35);
  --glow-teal:0 0 24px rgba(62,207,142,.45);

  /* ---- motion ---- */
  --dur-instant:80ms; --dur-quick:150ms; --dur-base:250ms; --dur-slow:400ms; --dur-drama:700ms;
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-spatial:cubic-bezier(.2,0,0,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- roles semánticos (DARK por defecto) ---- */
  --bg:#0A0E16; --surface:#101725; --surface-sunken:#0E1420;
  --border:#6B7A9033; --border-strong:#6B7A9066;
  --text:var(--ink); --text-muted:var(--mute);
  --primary:var(--teal); --on-primary:#06090F;
  --warning:var(--amber); --danger:var(--red); --success:var(--teal);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#F4F6FB; --surface:#FFFFFF; --surface-sunken:#EEF1F7;
    --border:#0A0E1614; --border-strong:#0A0E1626;
    --text:#141B27; --text-muted:#5A6678;
    --teal:#12A76A; --violet:#7B57E0; --peri:#5C6FD8; --blue:#2E7FE0; --amber:#B87A0C; --red:#D93B4E;
    --primary:var(--teal); --on-primary:#FFFFFF; --warning:var(--amber); --danger:var(--red); --success:var(--teal);
  }
}

/* overrides explícitos del toggle (ganan sobre la media query en ambos sentidos) */
:root[data-theme="dark"]{
  --bg:#0A0E16; --surface:#101725; --surface-sunken:#0E1420;
  --border:#6B7A9033; --border-strong:#6B7A9066;
  --text:#E8EEF7; --text-muted:#6B7A90;
  --teal:#3ECF8E; --violet:#A98BFF; --peri:#8B9DF0; --blue:#5AA9FF; --amber:#E8B446; --red:#FF5C6C;
  --primary:var(--teal); --on-primary:#06090F; --warning:var(--amber); --danger:var(--red); --success:var(--teal);
}
:root[data-theme="light"]{
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-sunken:#EEF1F7;
  --border:#0A0E1614; --border-strong:#0A0E1626;
  --text:#141B27; --text-muted:#5A6678;
  --teal:#12A76A; --violet:#7B57E0; --peri:#5C6FD8; --blue:#2E7FE0; --amber:#B87A0C; --red:#D93B4E;
  --primary:var(--teal); --on-primary:#FFFFFF; --warning:var(--amber); --danger:var(--red); --success:var(--teal);
}