/* ============================================================================
   Bivel — Tokens
   Copiados del design system (Bivel Design System standalone.html). Esta hoja
   es la única fuente de verdad de color, tipo, espacio, radios y movimiento.
   Si un valor cambia en el design system, cambia aquí y en ningún otro sitio.
   ========================================================================== */

:root{
  /* ---------- Marca: Bivel Red (primario) ---------- */
  --red-050:#fbe3da;--red-100:#f7cbbc;--red-200:#f2a38b;--red-300:#e6764f;
  --red-400:#d4501f;--red-500:#c33a10;--red-600:#ae2802;--red-700:#8c1f02;
  --red-800:#6b1701;--red-900:#460f00;
  --brand-red:var(--red-600);

  /* ---------- Marca: los dos hues acompañantes ---------- */
  --brand-blue:#446ba5;
  --brand-green:#3a8434;

  /* ---------- Marca: hueso / crema ---------- */
  --cream-050:#fffdf6;--cream-100:#f7f2df;--cream-200:#e8e2cd;--cream-300:#cfc9b4;
  --brand-cream:var(--cream-100);

  /* ---------- Neutros ---------- */
  --ink-000:#000000;--ink-050:#07080a;--ink-100:#0b0b0c;--ink-200:#111113;
  --ink-300:#17171a;--ink-400:#1f1f22;--ink-500:#2a2a2d;--ink-600:#343436;
  --ink-700:#5a5a58;--ink-800:#878682;--ink-900:#b4b2ac;
  --ink-deep:#140705;      /* el oscuro cálido donde muere el gradiente */
  --ink-deep-teal:#07191c; /* su contrapartida fría, al fondo del todo */

  /* ---------- Paleta de datos (macros) ----------
     Un hue por macro, y nunca se intercambian.

     OJO — esto se ha tomado de las capturas de la app (sep. 2026), no del
     design system: la app ha permutado los tres hues y ha metido ámbar en
     carbohidratos. El design system dice literalmente «no hay amarillo» y
     asignaba proteína al azul, carbohidratos al coral y grasas al verde:

         --data-protein:#8bb4ec;  --data-carbs:#ff8f75;  --data-fat:#6ec861;

     Manda la app porque es el estado más reciente del producto, pero uno de
     los dos tiene que ceder. */
  --data-protein:#3fcf8e;  /* verde */
  --data-carbs:#eaa93c;    /* ámbar — separado del gradiente: rojo sobre rojo se pierde */
  --data-fat:#5195ee;      /* azul */
  --data-water:#01f5a7;    /* menta heredado, solo para hidratación */

  /* ---------- Semánticos ---------- */
  --semantic-success:#6ec861;
  --semantic-warning:#e0a33a;
  --semantic-danger:#ff8f75;
  --semantic-info:#8bb4ec;

  /* ---------- Liquid glass ----------
     Toda sección es glass sobre el gradiente: relleno + blur + borde 1px +
     brillo interior superior de 1px. Cuatro profundidades. */
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 100%);
  --glass-fill-sunk:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);
  --glass-fill-raised:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.07) 100%);
  --glass-fill-accent:linear-gradient(180deg,rgba(233,96,60,.22) 0%,rgba(174,40,2,.10) 100%);
  --glass-border:rgba(255,255,255,.16);
  --glass-border-strong:rgba(255,255,255,.28);
  --glass-highlight:rgba(255,255,255,.30);
  --glass-shadow:0 16px 40px -16px rgba(0,0,0,.7);

  /* ---------- Superficies ---------- */
  --surface-app:var(--ink-deep);
  --surface-control:rgba(255,255,255,.10);
  --surface-control-hover:rgba(255,255,255,.16);
  --surface-track:rgba(255,255,255,.14);
  --surface-overlay:rgba(20,7,5,.55);
  --surface-scrim:rgba(0,0,0,.55);

  /* ---------- Texto ----------
     Sobre un gradiente cálido un gris neutro se lee como suciedad: el texto
     secundario es crema con alfa, nunca #878682. */
  --text-primary:var(--cream-100);
  --text-strong:#ffffff;
  --text-secondary:rgba(247,242,223,.72);
  --text-muted:rgba(247,242,223,.52);
  --text-disabled:rgba(247,242,223,.30);
  --text-accent:var(--red-300);
  --text-on-cream:var(--ink-deep);
  --text-link:var(--red-200);
  --text-link-hover:var(--cream-100);

  /* ---------- Líneas ---------- */
  --border-hairline:rgba(255,255,255,.12);
  --border-subtle:var(--glass-border);
  --border-strong:var(--glass-border-strong);
  --divider:rgba(255,255,255,.10);

  /* ---------- Interacción ----------
     La primaria es crema, no roja: sobre un gradiente rojo el crema es el
     valor más contrastado que existe. */
  --action-primary-bg:var(--cream-100);
  --action-primary-fg:var(--ink-deep);
  --action-primary-bg-hover:var(--cream-050);
  --action-primary-bg-active:var(--cream-200);
  --action-red-bg:var(--red-600);
  --action-red-fg:var(--cream-100);
  --action-glass-fg:var(--cream-100);
  --action-disabled-bg:rgba(255,255,255,.07);
  --action-disabled-fg:rgba(247,242,223,.28);
  --focus-ring:var(--cream-100);
}

/* ---------- Tipografía ---------- */
:root{
  --font-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:var(--font-sans);
  --font-display:var(--font-sans);
  --font-numeric:var(--font-sans);

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

  /* Escala de la app (móvil). La web la reescala arriba con clamp(). */
  --fs-metric:76px;
  --fs-metric-sm:44px;
  --fs-display:40px;
  --fs-h1:34px;
  --fs-h2:26px;
  --fs-h3:20px;
  --fs-body-lg:17px;
  --fs-body:15px;
  --fs-label:14px;
  --fs-caption:13px;
  --fs-micro:11px;

  --lh-tight:1.02;
  --lh-snug:1.15;
  --lh-normal:1.35;
  --lh-relaxed:1.55;

  --ls-metric:-.03em;
  --ls-display:-.025em;
  --ls-heading:-.02em;
  --ls-body:0em;
  --ls-eyebrow:.02em;

  --type-metric:var(--fw-light) var(--fs-metric)/var(--lh-tight) var(--font-numeric);
  --type-display:var(--fw-regular) var(--fs-display)/var(--lh-snug) var(--font-display);
  --type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display);
  --type-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display);
  --type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-normal) var(--font-display);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-body);
  --type-label:var(--fw-semibold) var(--fs-label)/var(--lh-normal) var(--font-body);
  --type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-normal) var(--font-body);
}

/* ---------- Espaciado ---------- */
:root{
  --space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;
  --space-10:64px;--space-11:80px;--space-12:96px;

  --gutter-screen:20px;
  --gutter-screen-wide:32px;
  --stack-section:32px;
  --stack-item:12px;
  --pad-card:16px;
  --pad-card-lg:20px;
  --pad-control-x:18px;
  --pad-control-y:12px;

  --size-control-sm:36px;
  --size-control:48px;
  --size-control-lg:56px;
  --size-cta:60px;
  --size-tap-min:44px;
  --size-tabbar:64px;
  --size-icon-sm:16px;
  --size-icon:20px;
  --size-icon-lg:24px;
  --size-avatar:40px;

  --width-content-max:520px;  /* columna de contenido de la app */
  --width-prose-max:660px;

  /* Añadido por la web: la app es de 393px, un navegador no. */
  --width-page-max:1200px;
  --gutter-page:clamp(20px,5vw,48px);
  --stack-web:clamp(72px,10vw,140px); /* aire entre secciones de la web */
}

/* ---------- Radios ---------- */
:root{
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-2xl:28px;
  --radius-pill:999px;
  --radius-circle:50%;

  --border-width-hair:1px;
  --border-width-accent:1.5px;
}

/* ---------- Profundidad ----------
   Sobre un gradiente la profundidad viene del blur y de un brillo interior
   superior, no de una sombra proyectada. */
:root{
  --shadow-none:none;
  --shadow-glass:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
  --shadow-card:var(--shadow-glass);
  --shadow-raised:0 24px 56px -20px rgba(0,0,0,.75);
  --shadow-overlay:0 32px 80px -24px rgba(0,0,0,.8);
  --shadow-glow-red:0 0 0 1px rgba(233,96,60,.45),0 16px 40px -12px rgba(174,40,2,.6);
  --shadow-glow-cream:0 14px 36px -14px rgba(247,242,223,.35);

  --blur-glass:24px;
  --blur-glass-heavy:40px;
  --blur-tabbar:32px;
  --glass-saturate:1.7;

  --grain-opacity:.05;
  --grain-size:180px;

  --scrim-bottom:linear-gradient(to top,rgba(20,7,5,.88) 0%,rgba(20,7,5,.5) 38%,rgba(20,7,5,0) 100%);
  --scrim-top:linear-gradient(to bottom,rgba(20,7,5,.6) 0%,rgba(20,7,5,0) 100%);
}

/* ---------- Gradientes ----------
   Ninguna pantalla es negra. Un foco de luz desenfocado que sangra hacia un
   oscuro cálido profundo. Siempre a sangre, siempre con grano. */
:root{
  --gradient-brand:
    radial-gradient(120% 70% at 18% -8%, #fffdf1 0%, rgba(255,253,241,0) 45%),
    radial-gradient(120% 85% at 55% 8%, var(--red-500) 0%, var(--red-700) 38%, rgba(107,23,1,0) 72%),
    linear-gradient(180deg, var(--red-800) 0%, #2a0d05 55%, var(--ink-deep-teal) 100%);

  --gradient-app:
    radial-gradient(78% 32% at 84% -8%, rgba(255,250,235,.30) 0%, rgba(255,250,235,0) 62%),
    radial-gradient(98% 40% at 58% -4%, rgba(174,40,2,.9) 0%, rgba(140,31,2,.34) 48%, rgba(107,23,1,0) 80%),
    radial-gradient(110% 44% at 2% 20%, rgba(174,40,2,.20) 0%, rgba(174,40,2,0) 62%),
    linear-gradient(180deg,#3a0e04 0%,#1d0803 24%,var(--ink-deep) 46%,#100609 72%,#0a1114 100%);

  --gradient-app-warm:
    radial-gradient(80% 32% at 14% -8%, rgba(255,250,235,.30) 0%, rgba(255,250,235,0) 62%),
    radial-gradient(100% 40% at 34% -4%, rgba(195,58,16,.85) 0%, rgba(140,31,2,.32) 48%, rgba(107,23,1,0) 80%),
    linear-gradient(180deg,#421306 0%,#200903 24%,var(--ink-deep) 48%,#100609 74%,#0a1114 100%);

  --gradient-app-deep:
    radial-gradient(66% 26% at 88% -6%, rgba(255,250,235,.18) 0%, rgba(255,250,235,0) 64%),
    radial-gradient(104% 34% at 50% -2%, rgba(174,40,2,.62) 0%, rgba(107,23,1,0) 74%),
    linear-gradient(180deg,#280b04 0%,#170703 26%,var(--ink-deep) 50%,#0d0608 76%,#081113 100%);

  --gradient-brand-mark:
    radial-gradient(70% 70% at 6% 38%, #f7f2df 0%, rgba(247,242,223,0) 42%),
    radial-gradient(110% 90% at 42% 12%, var(--red-500) 0%, var(--red-700) 45%, rgba(70,15,0,0) 78%),
    linear-gradient(150deg, #3b1207 0%, #180a08 60%, var(--ink-deep-teal) 100%);

  --gradient-accent-sweep:linear-gradient(90deg,var(--red-600),var(--red-400));
  --gradient-ring-fade:linear-gradient(180deg,var(--cream-100),var(--red-300));
}

/* ---------- Movimiento ---------- */
:root{
  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:360ms;
  --dur-screen:420ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.5,0,.9,.2);
  --ease-emphasis:cubic-bezier(.34,1.3,.5,1);

  --transition-control:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  --press-scale:.97;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-screen:0ms;}
}