/* ============================================================
   VIRALSONAR — Design tokens v1.0
   Territorio: Sonar Abisal · 20 agosto 2026
   Validado: contraste WCAG + daltonismo (protán / deután / tritán)
   ============================================================ */

:root {
  /* ---------- Rampa AQUA (primario · el ping) ---------- */
  --aqua-50:#E3F6F8; --aqua-100:#C6E9EC; --aqua-200:#9DD6DC; --aqua-300:#6EC1C9;
  --aqua-400:#45B7C2; --aqua-500:#00A7B3; --aqua-600:#008D99; --aqua-700:#00717C;
  --aqua-800:#00535C; --aqua-900:#00333B; --aqua-950:#001B20;

  /* ---------- Rampa CORAL (acento · el contacto) ---------- */
  --coral-50:#FFEBE3; --coral-100:#FFD5C8; --coral-200:#FFB6A1; --coral-300:#F69378;
  --coral-400:#F17452; --coral-500:#DE5833; --coral-600:#C23D15; --coral-700:#A02200;
  --coral-800:#780300; --coral-900:#500000; --coral-950:#300000;

  /* ---------- Rampa VIOLETA (terciario · audio / propagación) ---------- */
  --violet-50:#EFEFFF; --violet-100:#DDDCFF; --violet-200:#C4C2FF; --violet-300:#AAA4FF;
  --violet-400:#8E82F6; --violet-500:#7A69E6; --violet-600:#6450CB; --violet-700:#4D36A8;
  --violet-800:#341B7F; --violet-900:#1D0354; --violet-950:#0D0032;

  /* ---------- Rampa INK (neutro azulado) ---------- */
  --ink-0:#F8FCFF;  --ink-50:#EFF4F9;  --ink-100:#E1E9EF; --ink-200:#C9D2DA;
  --ink-300:#A6AFB7; --ink-400:#828A92; --ink-500:#626A71; --ink-600:#464E55;
  --ink-700:#2E373E; --ink-800:#19232B; --ink-900:#09131A; --ink-950:#01070F;

  /* ---------- Marca ---------- */
  --brand-abyss:#071018;   /* fondo raíz · el abismo */
  --brand-primary:#00A7B3; /* el ping */
  --brand-accent:#DE5833;  /* el contacto */
}

/* ============ MODO OSCURO (por defecto del producto) ============ */
:root, :root[data-theme="dark"] {
  color-scheme: dark;

  --surface-0:#071018;   /* fondo de página */
  --surface-1:#0D1B26;   /* tarjetas */
  --surface-2:#132531;   /* elevado / hover */
  --border:#1B2E3B;
  --border-strong:#26414F;

  --text-primary:#E8F1F4;
  --text-secondary:#9AB0BA;
  --text-muted:#63808E;
  --text-on-primary:#03191C;

  --accent:#00A7B3;      /* marcas de datos, gráficos */
  --accent-text:#22D3E0; /* texto/números sobre oscuro — sube contraste */
  --accent-soft:#0A2E36;
  --contact:#DE5833;
  --contact-text:#F17452;
  --contact-soft:#2A1611;
  --wave:#7A69E6;
  --wave-text:#8E82F6;
  --wave-soft:#191333;

  /* series categóricas del dashboard (orden fijo, nunca ciclado) */
  --series-1:#00A7B3; --series-2:#DE5833; --series-3:#7A69E6;

  /* estados */
  --state-oro:#00A7B3;        /* ≥10× mediana */
  --state-acelerando:#DE5833; /* velocidad creciente */
  --state-propagando:#7A69E6; /* audio extendiéndose */
  --state-frio:#626A71;       /* saturado / enfriándose */
}

/* ============ MODO CLARO (emails, PDF, facturas, landing) ============ */
:root[data-theme="light"] {
  color-scheme: light;

  --surface-0:#F8FCFF;
  --surface-1:#FFFFFF;
  --surface-2:#EFF4F9;
  --border:#E1E9EF;
  --border-strong:#C9D2DA;

  --text-primary:#09131A;
  --text-secondary:#464E55;
  --text-muted:#626A71;
  --text-on-primary:#FFFFFF;

  --accent:#008D99;       /* re-escalonado para superficie clara */
  --accent-text:#00717C;
  --accent-soft:#E3F6F8;
  --contact:#C23D15;
  --contact-text:#A02200;
  --contact-soft:#FFEBE3;
  --wave:#6450CB;
  --wave-text:#4D36A8;
  --wave-soft:#EFEFFF;

  --series-1:#008D99; --series-2:#C23D15; --series-3:#6450CB;

  --state-oro:#008D99;
  --state-acelerando:#C23D15;
  --state-propagando:#6450CB;
  --state-frio:#626A71;
}

@media (prefers-color-scheme: light) {
  :root:where(:not([data-theme="dark"])) {
    color-scheme: light;
    --surface-0:#F8FCFF; --surface-1:#FFFFFF; --surface-2:#EFF4F9;
    --border:#E1E9EF; --border-strong:#C9D2DA;
    --text-primary:#09131A; --text-secondary:#464E55; --text-muted:#626A71;
    --text-on-primary:#FFFFFF;
    --accent:#008D99; --accent-text:#00717C; --accent-soft:#E3F6F8;
    --contact:#C23D15; --contact-text:#A02200; --contact-soft:#FFEBE3;
    --wave:#6450CB; --wave-text:#4D36A8; --wave-soft:#EFEFFF;
    --series-1:#008D99; --series-2:#C23D15; --series-3:#6450CB;
    --state-oro:#008D99; --state-acelerando:#C23D15;
    --state-propagando:#6450CB; --state-frio:#626A71;
  }
}

/* ============ TIPOGRAFÍA ============ */
:root {
  --font-display:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-display:clamp(38px,5.2vw,60px);  --lh-display:1.04; --ls-display:-0.03em;
  --fs-h1:34px; --fs-h2:25px; --fs-h3:19px;
  --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px;
  --fs-metric:44px; --ls-metric:-0.035em;
  --fs-label:11px; --ls-label:0.14em;
}

/* Números de métricas: SIEMPRE tabulares (columnas de ×mediana alineadas) */
.metric, .data-table td, .tabular { font-variant-numeric: tabular-nums; }

/* ============ FORMA Y ELEVACIÓN ============ */
:root {
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 4px 16px rgba(0,0,0,.40);
  --glow-ping:0 0 0 1px rgba(0,167,179,.35), 0 0 28px rgba(0,167,179,.20);
  --glow-contact:0 0 0 1px rgba(222,88,51,.40), 0 0 24px rgba(222,88,51,.22);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:520ms;
}

/* Anillo de foco accesible — obligatorio en todo elemento interactivo */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--accent-text);
  outline-offset:2px;
  border-radius:var(--r-sm);
}