/* ===========================================================================
   design-tokens.css — DIRECCIÓN CONGELADA · MacroMed "Vital Moderno"
   ---------------------------------------------------------------------------
   Sans moderna (Schibsted Grotesk + Hanken Grotesk). Dos colores de marca del
   logo real: VERDE esmeralda #00916D (acción) + ROSA frambuesa #E45F89 (2º de
   marca). Claro por defecto; oscuro por prefers-color-scheme y [data-theme].
   Todo color/fuente vive acá; los componentes solo leen var(--…).
   =========================================================================== */

:root{
  --font-display:'Schibsted Grotesk';
  --font-body:'Hanken Grotesk';

  /* Capas */
  --bg:#F5F9F7; --paper:#FFFFFF; --sunk:#EAF2EE; --deep:#0A342780;

  /* Tinta */
  --ink:#12211B; --ink-soft:#4C5A52; --ink-faint:#82908A;

  /* Estructura */
  --line:#E4ECE7; --line-2:#D2DDD6;
  --radius:14px; --radius-lg:22px; --radius-xl:32px; --radius-btn:13px;

  /* Marca 1 — verde esmeralda */
  --green:#00916D; --green-hover:#007B5C; --green-deep:#0A3A2C; --green-ink:#082A20;
  --green-soft:#DAF0E8; --mint:#C4E8D9;

  /* Marca 2 — rosa frambuesa */
  --pink:#E45F89; --pink-hover:#D24775; --pink-deep:#B23A63; --pink-soft:#FCE1EB;

  /* Bloques oscuros (footer/ticker) — fijos en ambos temas */
  --panel:#0C3A2C; --panel-ink:#E7F3EE; --panel-ink-soft:#9FBBB0; --panel-line:#1C4C3C;

  /* Estados */
  --ok:#00916D; --warn:#C98A10; --danger:#D6453C;
  --warn-soft:#FBEBCB; --danger-soft:#FBE0DE;

  --on-green:#FFFFFF; --on-pink:#FFFFFF;

  /* Sombras (tinte verde) */
  --shadow:0 22px 46px -26px rgba(10,58,44,.30);
  --shadow-sm:0 10px 24px -14px rgba(10,58,44,.20);
  --shadow-lg:0 34px 70px -34px rgba(10,58,44,.36);

  /* Blobs decorativos */
  --blob-1:#00916D; --blob-2:#E45F89; --blob-3:#C4E8D9;

  color-scheme:light;
}

/* ---------- OSCURO (sistema) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1712; --paper:#122019; --sunk:#0E1B15; --deep:#0713104D;
    --ink:#EAF3EF; --ink-soft:#A6B8AF; --ink-faint:#6E8177;
    --line:#20302880; --line-2:#2C3E36;
    --green:#12B889; --green-hover:#0FA579; --green-deep:#BFEBDB; --green-ink:#EAF3EF;
    --green-soft:#123329; --mint:#173D31;
    --pink:#F07AA0; --pink-hover:#F48FB0; --pink-deep:#F4A8C2; --pink-soft:#33161F;
    --panel:#081A14; --panel-ink:#E7F3EE; --panel-ink-soft:#8FA99E; --panel-line:#1B342A;
    --on-green:#04140E; --on-pink:#1A0710;
    --shadow:0 22px 46px -26px rgba(0,0,0,.6);
    --shadow-sm:0 10px 24px -14px rgba(0,0,0,.5);
    --shadow-lg:0 34px 70px -34px rgba(0,0,0,.66);
    --warn-soft:#3A2E12; --danger-soft:#3A1815;
    color-scheme:dark;
  }
}

/* ---------- OSCURO (toggle explícito) ---------- */
:root[data-theme="dark"]{
  --bg:#0B1712; --paper:#122019; --sunk:#0E1B15; --deep:#0713104D;
  --ink:#EAF3EF; --ink-soft:#A6B8AF; --ink-faint:#6E8177;
  --line:#20302880; --line-2:#2C3E36;
  --green:#12B889; --green-hover:#0FA579; --green-deep:#BFEBDB; --green-ink:#EAF3EF;
  --green-soft:#123329; --mint:#173D31;
  --pink:#F07AA0; --pink-hover:#F48FB0; --pink-deep:#F4A8C2; --pink-soft:#33161F;
  --panel:#081A14; --panel-ink:#E7F3EE; --panel-ink-soft:#8FA99E; --panel-line:#1B342A;
  --on-green:#04140E; --on-pink:#1A0710;
  --shadow:0 22px 46px -26px rgba(0,0,0,.6);
  --shadow-sm:0 10px 24px -14px rgba(0,0,0,.5);
  --shadow-lg:0 34px 70px -34px rgba(0,0,0,.66);
  --warn-soft:#3A2E12; --danger-soft:#3A1815;
  color-scheme:dark;
}