@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════
   FAENA UI — TOKENS (tema oscuro por defecto)
══════════════════════════════════════════════════════════ */
:root {
  /* Fondos navy */
  --n0:#020810; --n1:#050C18; --n2:#081220; --n3:#0C1A2E; --n4:#112038;
  /* Acento teal */
  --t0:#00FFE8; --t1:#00E5CC; --t2:#00B8A8; --t3:#007A6E; --t4:#004A42;
  /* Texto */
  --tx1:#EEF5FF; --tx2:rgba(238,245,255,.64); --tx3:rgba(238,245,255,.36);
  /* Bordes / glow */
  --b1:rgba(0,229,204,.10); --b2:rgba(0,229,204,.22); --b3:rgba(0,229,204,.42);
  --glo:rgba(0,229,204,.14);
  /* Estados */
  --ok:#4AE8A0; --ok-bg:rgba(74,232,160,.10);
  --warn:#E8C845; --warn-bg:rgba(232,200,69,.10);
  --err:#FF7575; --err-bg:rgba(255,80,80,.10);

  /* Superficies / card */
  --card-bg:var(--n2);
  --header-bg:rgba(5,12,24,.72);

  /* Tipografía */
  --font:'Sora',system-ui,sans-serif;
  --fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:20px; --fs-xl:26px; --fs-2xl:36px; --fs-3xl:clamp(34px,6vw,64px);

  /* Radios (Material generosos) */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:100px;

  /* Elevación Material (dark) */
  --elev-1:0 1px 2px rgba(0,0,0,.34), 0 1px 3px 1px rgba(0,0,0,.18);
  --elev-2:0 1px 2px rgba(0,0,0,.34), 0 2px 6px 2px rgba(0,0,0,.18);
  --elev-3:0 1px 3px rgba(0,0,0,.34), 0 4px 8px 3px rgba(0,0,0,.18);
  --elev-4:0 2px 3px rgba(0,0,0,.34), 0 6px 10px 4px rgba(0,0,0,.20);
  --elev-5:0 4px 4px rgba(0,0,0,.34), 0 8px 12px 6px rgba(0,0,0,.22);

  /* State layers */
  --state-hover:rgba(0,229,204,.08);
  --state-press:rgba(0,229,204,.14);

  --ease:.22s cubic-bezier(.34,1.56,.64,1);
  --ease-soft:.3s cubic-bezier(.22,1,.36,1);
}

/* ══════════════════════════════════════════════════════════
   TEMA CLARO
══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --n0:#F4F3F0; --n1:#ECEAE5; --n2:#FFFFFF; --n3:#F0EFEB; --n4:#E3E2DC;
  --t0:#00A090; --t1:#00766C; --t2:#005C54; --t3:#004840; --t4:#D4EFEA;
  --tx1:#0F2A28; --tx2:rgba(15,42,40,.70); --tx3:rgba(15,42,40,.44);
  --b1:rgba(67,70,75,.13); --b2:rgba(0,118,108,.24); --b3:rgba(0,118,108,.42);
  --glo:rgba(0,118,108,.10);
  --ok:#189A58; --ok-bg:rgba(24,154,88,.10);
  --warn:#A87A10; --warn-bg:rgba(168,122,16,.10);
  --err:#C83030; --err-bg:rgba(200,48,48,.10);

  --card-bg:#FFFFFF;
  --header-bg:rgba(255,255,255,.78);

  --elev-1:0 1px 2px rgba(15,60,55,.10), 0 1px 3px 1px rgba(15,60,55,.07);
  --elev-2:0 1px 2px rgba(15,60,55,.12), 0 2px 6px 2px rgba(15,60,55,.08);
  --elev-3:0 1px 3px rgba(15,60,55,.12), 0 4px 8px 3px rgba(15,60,55,.10);
  --elev-4:0 2px 3px rgba(15,60,55,.14), 0 6px 10px 4px rgba(15,60,55,.12);
  --elev-5:0 4px 4px rgba(15,60,55,.16), 0 8px 12px 6px rgba(15,60,55,.14);

  --state-hover:rgba(0,118,108,.08);
  --state-press:rgba(0,118,108,.14);
}