/* ============================================================
   STUDIO BLASTER — DESIGN TOKENS
   Arquitectura de tres capas: Primitive -> Semantic -> Component
   ============================================================ */

/* ---------- 1. PRIMITIVE ---------- */
:root{
  /* ---- PALETA: solo tres colores ----
     Los grises intermedios no son colores nuevos: son el negro o el
     blanco a distinta opacidad, para no ensuciar la paleta. */

  /* 1. Blanco casi gris */
  --sb-white:#FFFFFF;
  --sb-gray:#F4F2F0;
  --sb-gray-2:#E7E4E1;

  /* 2. Negro */
  --sb-black-950:#0A0908;
  --sb-black-900:#12100E;
  --sb-black-850:#1A1816;
  --sb-black-800:#242220;

  /* 3. Naranja */
  --sb-orange-700:#9E3707;
  --sb-orange-600:#C0440A;
  --sb-orange-500:#E0551A;
  --sb-orange-400:#FF6B35;

  /* Tipografía — Inter en todo el sistema */
  /* Inter y nada más. Sin Helvetica, sin Sora, sin Arimo, sin fallbacks de sistema. */
  --sb-font-display:"Inter",sans-serif;
  --sb-font-body:"Inter",sans-serif;

  /* Escala tipográfica — subida un escalón: la marca tiene que pesar */
  --sb-text-2xs:.6875rem;
  --sb-text-xs:.75rem;
  --sb-text-sm:.875rem;
  --sb-text-base:1rem;
  --sb-text-lg:1.125rem;
  --sb-text-xl:clamp(1.125rem,1.4vw,1.375rem);
  --sb-text-2xl:clamp(1.375rem,2.3vw,2rem);
  --sb-text-3xl:clamp(1.875rem,3.5vw,3rem);
  --sb-text-display:clamp(2.375rem,5.4vw,5rem);

  /* Espaciado */
  --sb-space-1:8px;
  --sb-space-2:16px;
  --sb-space-3:24px;
  --sb-space-4:40px;
  --sb-space-5:64px;
  --sb-space-6:96px;
  --sb-space-7:128px;
  --sb-gutter:clamp(20px,4.5vw,48px);
  --sb-maxw:1200px;

  /* Radios */
  --sb-radius-none:0px;
  --sb-radius-sm:2px;
  --sb-radius-md:14px;
  --sb-radius-lg:24px;
  --sb-radius-xl:32px;
  --sb-radius-xxl:clamp(28px,4vw,60px);   /* esquinas de sección */
  --sb-radius-pill:999px;

  /* Movimiento */
  --sb-ease:cubic-bezier(.22,.61,.36,1);
  --sb-ease-out-expo:cubic-bezier(.16,1,.3,1);
  --sb-dur-fast:160ms;
  --sb-dur-base:280ms;
  --sb-dur-slow:420ms;
  --sb-dur-reveal:900ms;

  /* Capas */
  --sb-z-base:0;
  --sb-z-sticky:40;
  --sb-z-nav:100;
  --sb-z-fab:200;
  --sb-z-overlay:300;
}

/* ---------- 2. SEMANTIC ---------- */
:root{
  --color-surface:var(--sb-black-900);
  --color-surface-raised:var(--sb-black-850);
  --color-surface-sunken:var(--sb-black-950);

  --color-text:var(--sb-gray);
  --color-text-muted:rgba(244,242,240,.62);
  --color-text-faint:rgba(244,242,240,.38);
  --color-text-on-accent:var(--sb-white);

  --color-accent:var(--sb-orange-600);
  --color-accent-hover:var(--sb-orange-500);
  --color-accent-text:var(--sb-orange-400);   /* 6.6:1 sobre el negro cálido */

  --color-border:rgba(244,242,240,.13);
  --color-border-strong:rgba(244,242,240,.28);
  --color-border-accent:rgba(255,107,53,.42);

  --font-heading:var(--sb-font-display);
  --font-body:var(--sb-font-body);
  --font-label:var(--sb-font-body);

  /* Glow de marca — el naranja tiene que emitir luz, no quedarse plano */
  --glow-accent:0 0 40px rgba(255,107,53,.28);
  --glow-accent-strong:0 0 70px rgba(255,107,53,.45);
}

/* ---------- 3. COMPONENT ---------- */
:root{
  /* Navegación */
  --nav-height:96px;
  --nav-height-scrolled:70px;
  --nav-logo-height:46px;         /* la marca, con presencia */
  --nav-logo-height-scrolled:34px;
  --nav-bg-scrolled:rgba(18,16,14,.80);
  --nav-blur:18px;

  /* Botones */
  --btn-primary-bg:var(--color-accent);
  --btn-primary-bg-hover:var(--color-accent-hover);
  --btn-primary-text:var(--color-text-on-accent);
  --btn-ghost-border:var(--color-border-strong);
  --btn-ghost-text:var(--color-text);
  --btn-ghost-bg-hover:rgba(244,242,240,.09);
  --btn-height:58px;
  --btn-height-sm:46px;
  --btn-padding-x:32px;

  /* Border beam — el haz que recorre el borde */
  --beam-size:120px;
  --beam-duration:4.5s;
  --beam-color:var(--sb-orange-400);

  /* Gradado del video: fuerza el metraje hacia la paleta de marca */
  --hero-video-filter:saturate(1.15) contrast(1.12) brightness(.52);
  --hero-tint-opacity:.55;

  /* FAB WhatsApp */
  --fab-size:62px;
  --fab-bg:var(--sb-orange-600);
  --fab-offset:clamp(18px,3vw,34px);

  /* Etiquetas meta */
  --label-size:var(--sb-text-2xs);
  --label-tracking:.2em;
}