/* ============================================================================
   Bivel — Tokens · web v2
   Paleta OSCURA nueva de la app (handoff 15-16 sep 2026: theme.dark.ts,
   glass.ts, BivelBackground.tsx). Única fuente de verdad de color, tipo,
   espacio, radios y movimiento. Si cambia en la app, cambia aquí.
   ========================================================================== */

:root{
  /* ---------- Fondo (BivelBackground.tsx → DARK) ---------- */
  --bg-base:#0e0a09;
  --bg-ember:#c0341a;     /* mancha principal */
  --bg-accent-alt:#e8412a;
  --bg-deep:#8c1f02;      /* rojo profundo */
  --bg-flare:#ffefd8;     /* destello crema */
  --bg-cold:#2a0f0a;      /* contrapeso */
  --bg-peach:#7a3316;
  --bg-grain:.40;

  /* ---------- Marca ---------- */
  --accent:#f0552b;       /* iconActive, anillo, botón IA */
  --accent-soft:#ff9a6a;  /* coral: arranque del degradado del anillo */
  --accent-deep:#8c1f02;
  --ink:#251511;          /* cuerpo del cristal */
  --ink-bar:#100e0d;
  --cream:#f4ede7;        /* canto y texto */
  --cream-050:#fffdf6;
  --cream-100:#f7f2df;

  /* ---------- Cristal («un solo cristal por tema») ---------- */
  --glass-fill:rgba(37,21,17,.72);
  --glass-edge:rgba(244,237,231,.18);
  --glass-edge-strong:rgba(244,237,231,.32);
  --glass-shadow:0 6px 14px rgba(0,0,0,.22);
  --glass-blur:24px;
  --panel-fill:rgba(255,255,255,.06);      /* plano DENTRO de un cristal */
  --panel-edge:rgba(244,237,231,.10);
  --bar-fill:rgba(16,14,13,.66);           /* barra de pestañas / cabecera */
  --bar-edge:rgba(244,237,231,.16);
  --bar-shadow:0 12px 28px rgba(0,0,0,.35);

  /* ---------- Datos ---------- */
  --data-protein:#2fa37c; --data-protein-tint:#8fe8c0;
  --data-carbs:#f2a93b;   --data-carbs-tint:#ffd98a;
  --data-fat:#4d9dff;     --data-fat-tint:#8fc4ff;
  --data-water:#f0552b;   --data-water-tint:#ff9a6a;

  /* ---------- Texto ---------- */
  --text-primary:var(--cream);
  --text-strong:#ffffff;
  --text-secondary:rgba(244,237,231,.72);
  --text-muted:rgba(244,237,231,.48);
  --text-faint:rgba(244,237,231,.30);
  --text-accent:var(--accent);
  --text-on-cream:var(--bg-base);
  --text-inactive:#8a827c;

  /* ---------- Acción ---------- */
  --action-primary-bg:var(--cream);
  --action-primary-fg:var(--bg-base);
  --action-primary-bg-hover:#ffffff;
  --action-accent-bg:var(--accent);
  --action-accent-fg:var(--cream-050);
  --action-tint-bg:rgba(240,85,43,.18);    /* «Añadir al diario» */
  --action-tint-fg:var(--accent);
  --focus-ring:var(--cream);

  /* ---------- Radios (app: 44 grandes · 36 medianas · 26 internas) ---------- */
  --radius-xl:36px;
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:12px;
  --radius-pill:999px;

  /* ---------- Espacio ---------- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:144px;
  --gutter:clamp(20px,4vw,48px);
  --measure:62ch;
  --page-max:1280px;

  /* ---------- Movimiento (transitions.ts: una curva, tres duraciones) ---------- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms;
  --dur:280ms;
  --dur-slow:520ms;
}

/* ---------- Tipografía ----------
   Archivo para la web (marca); Open Sauce One dentro de los elementos de
   interfaz, como la app. Titulares grandes: −.06em (la app usa −8 %). */
:root{
  --font-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-ui:"Open Sauce One","Archivo","Helvetica Neue",Arial,sans-serif;

  --fw-light:300;--fw-regular:400;--fw-medium:500;
  --fw-semibold:600;--fw-bold:700;--fw-extrabold:800;

  /* Escala fluida, calcada de la referencia (linearity.io): su rem es
     100vw/105, o sea 13,7 px a 1440 y 18,3 px a 1920. Todo se mide en --u
     y los suelos evitan que en móvil se haga ilegible. */
  --u:clamp(12px,.9524vw,18.3px);
  --fs-display:max(30px,calc(2.5 * var(--u)));     /* 34 @1440 · 46 @1920 */
  --fs-h1:max(26px,calc(2 * var(--u)));
  --fs-h2:max(20px,calc(1.5 * var(--u)));
  --fs-h3:max(16px,calc(1.125 * var(--u)));
  --fs-lead:max(13px,calc(.8 * var(--u)));          /* 11 @1440 · 14,6 @1920 */
  --fs-body:max(14px,calc(1 * var(--u)));
  --fs-ui:max(13px,calc(.875 * var(--u)));          /* botones y nav: 12 @1440 · 16 @1920 */
  --fs-label:max(13px,calc(.875 * var(--u)));
  --fs-caption:max(12px,calc(.75 * var(--u)));
  --fs-micro:11px;

  --lh-tight:1.2;
  --lh-snug:1.12;
  --lh-normal:1.35;
  --lh-relaxed:1.55;

  --ls-display:-.02em;
  --ls-heading:-.025em;
  --ls-body:0;
  --ls-eyebrow:.08em;
}