/* ==========================================================================
   ChacoNET · Design Tokens
   Sistema de diseño único para todo el sitio.
   ========================================================================== */

:root{
  /* ---------- Marca ---------- */
  --brand-100:#E9E4FF;
  --brand-200:#C4B6FF;
  --brand-300:#A08CFF;
  --brand-400:#7A5BFF;
  --brand-500:#5B37F0;
  --brand-600:#3A2199;
  --brand-700:#281670;   /* color institucional original */
  --brand-800:#1B0F52;
  --brand-900:#120A38;
  --brand-950:#0A0620;

  --cyan-200:#B7F3FF;
  --cyan-300:#6BE7FF;
  --cyan-400:#00D4FF;
  --cyan-500:#00A6D6;

  --gold-200:#FFE7AE;
  --gold-300:#FFD86B;
  --gold-400:#FFC94A;
  --gold-500:#F0A11C;

  /* ---------- Neutros ---------- */
  --ink-0:#FFFFFF;
  --ink-50:#F5F5F7;
  --ink-100:#E8E8ED;
  --ink-200:#D2D2D9;
  --ink-300:#B0B0BC;
  --ink-400:#8A8A96;
  --ink-500:#6E6E7A;
  --ink-600:#4A4A55;
  --ink-700:#33333B;
  --ink-800:#1F1F26;
  --ink-900:#121218;
  --ink-950:#08080C;

  /* ---------- Semántica (tema oscuro, por defecto) ---------- */
  --bg:#05040E;
  --bg-2:#0A0817;
  --bg-3:#120C2B;
  --text:#F5F5F7;
  --text-2:rgba(245,245,247,.70);
  --text-3:rgba(245,245,247,.48);
  --text-4:rgba(245,245,247,.30);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --card:rgba(255,255,255,.045);
  --card-hi:rgba(255,255,255,.085);
  --glass:rgba(6,5,16,.66);
  --scrim:rgba(3,2,10,.72);

  /* ---------- Acentos semánticos ---------- */
  --accent:var(--brand-400);
  --accent-2:var(--cyan-400);
  --accent-3:var(--gold-400);
  --grad-brand:linear-gradient(120deg,var(--brand-400) 0%,var(--brand-500) 42%,var(--cyan-400) 100%);
  --grad-warm:linear-gradient(120deg,var(--gold-200) 0%,var(--gold-400) 55%,var(--gold-500) 100%);
  --grad-text:linear-gradient(96deg,#FFFFFF 0%,#D9D2FF 38%,var(--cyan-300) 100%);
  --grad-line:linear-gradient(90deg,transparent,var(--brand-400),var(--cyan-400),transparent);

  /* ---------- Tipografía ---------- */
  --font-display:"Sora","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-text:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --fs-display-1:clamp(2.9rem,7.6vw,6.5rem);
  --fs-display-2:clamp(2.3rem,5.4vw,4.5rem);
  --fs-display-3:clamp(1.85rem,3.6vw,3rem);
  --fs-h1:clamp(1.9rem,3.2vw,2.6rem);
  --fs-h2:clamp(1.35rem,2.1vw,1.75rem);
  --fs-h3:clamp(1.1rem,1.5vw,1.3rem);
  --fs-lead:clamp(1.05rem,1.55vw,1.4rem);
  --fs-body:clamp(.98rem,1.05vw,1.075rem);
  --fs-sm:.9rem;
  --fs-xs:.8rem;
  --fs-2xs:.72rem;

  --lh-tight:.98;
  --lh-snug:1.14;
  --lh-body:1.62;
  --tracking-tight:-.035em;
  --tracking-snug:-.02em;
  --tracking-wide:.14em;

  /* ---------- Espacio ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:96px; --sp-10:128px;
  --section-y:clamp(72px,9vw,148px);
  --shell:1240px;
  --shell-wide:1480px;
  --gutter:clamp(20px,4.2vw,44px);
  --header-h:64px;

  /* ---------- Radios ---------- */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-pill:999px;

  /* ---------- Sombras ---------- */
  --sh-sm:0 1px 2px rgba(0,0,0,.3);
  --sh-md:0 12px 32px -12px rgba(0,0,0,.55);
  --sh-lg:0 34px 80px -32px rgba(0,0,0,.7);
  --sh-glow:0 0 0 1px rgba(122,91,255,.32),0 22px 60px -22px rgba(122,91,255,.6);

  /* ---------- Movimiento ---------- */
  --d-instant:90ms;
  --d-fast:180ms;
  --d-base:320ms;
  --d-slow:560ms;
  --d-xslow:900ms;
  --e-out:cubic-bezier(.22,.75,.24,1);
  --e-inout:cubic-bezier(.66,.03,.3,1);
  --e-spring:cubic-bezier(.34,1.42,.5,1);
  --e-emphasis:cubic-bezier(.16,1,.3,1);

  /* ---------- Capas ---------- */
  --z-base:1; --z-sticky:50; --z-header:100; --z-menu:200; --z-modal:300; --z-toast:400;

  color-scheme:dark;
}

/* ---------- Ámbito claro (secciones Apple-style blancas) ---------- */
.theme-light{
  --bg:#FFFFFF;
  --bg-2:#F5F5F7;
  --bg-3:#EDEDF2;
  --text:#0B0B10;
  --text-2:rgba(11,11,16,.66);
  --text-3:rgba(11,11,16,.46);
  --text-4:rgba(11,11,16,.28);
  --line:rgba(11,11,16,.10);
  --line-2:rgba(11,11,16,.18);
  --card:rgba(11,11,16,.035);
  --card-hi:rgba(11,11,16,.06);
  --glass:rgba(255,255,255,.72);
  --scrim:rgba(255,255,255,.75);
  --grad-text:linear-gradient(96deg,#0B0B10 0%,#33238F 55%,#0086AD 100%);
  --sh-md:0 12px 30px -14px rgba(11,11,16,.22);
  --sh-lg:0 30px 70px -30px rgba(11,11,16,.3);
  /* Acentos re-calibrados para fondos claros: mismos matices, más contraste */
  --cyan-200:#005E80;
  --cyan-300:#007EA6;
  --gold-300:#9A5B00;
  --gold-400:#C07A00;
  --brand-200:#4A2FBF;
  --brand-300:#5B37F0;
  color-scheme:light;
}

/* ---------- Preferencias del usuario ---------- */
@media (prefers-contrast:more){
  :root{ --text-2:rgba(245,245,247,.86); --text-3:rgba(245,245,247,.7); --line:rgba(255,255,255,.24); }
}