/* Tokens HF. Valores medidos sobre las referencias 01/02 (muestreo de píxeles) donde se indica. */
:root {
  color-scheme: dark;
  --bg: #07111A;            /* ref: #010B11–#0A141D (teal-navy más oscuro que #0B1018) */
  --bg-glow: rgba(25, 120, 140, .16);
  --s1: #0C1822;            /* tarjeta; ref ≈ #0B171D */
  --s2: #112130;
  --s3: #182C3F;
  --line: rgba(160, 205, 235, .10);
  --line-strong: rgba(160, 205, 235, .22);

  --ink: #F2F5F7;
  --ink-2: #A9BBC9;
  --ink-3: #8497A8;

  --blue: #4B7BF5;          /* controles activos en las referencias (≈ #4B7BF5–#6992FD) */
  --emerald: #2FDC95;       /* ref ≈ #37D398 (nav) / #3BEA8F (barras) */
  --violet: #9785EC;
  --purple: #7B4DF0;        /* badge PREMIUM relleno */
  --gold: #E3A93F;          /* ref ≈ #D49D3E */
  --red: #E0505A;           /* ref ≈ #BE323B (más vivo para legibilidad) */
  --silver: #B5C1D1;

  --blue-soft: rgba(75, 123, 245, .18);
  --emerald-soft: rgba(47, 220, 149, .14);
  --violet-soft: rgba(151, 133, 236, .16);
  --gold-soft: rgba(227, 169, 63, .15);
  --red-soft: rgba(224, 80, 90, .15);

  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 28px rgba(0, 0, 0, .35);

  --gutter: 16px;
  --nav-h: 62px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --font: "Barlow Semi Condensed", "Liberation Sans Narrow", "Arial Narrow", ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ===== Sistema de píldoras (medido sobre las referencias 01/02: cápsula completa, activo azul con degradado) ===== */
:root {
  --pill-h: 44px;
  --pill-bg: #0E1A25;
  --pill-bg-2: #0A141D;
  --pill-edge: rgba(190, 215, 240, .13);
  --blue-top: #5E8DFF; --blue-bot: #3665EE;
  --blue-grad: linear-gradient(180deg, var(--blue-top), var(--blue-bot));
  --blue-shadow: 0 6px 16px rgba(54, 101, 238, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
  --gold-tint: rgba(227, 169, 63, .12); --violet-tint: rgba(123, 77, 240, .22);
}