/* Herrería Múltiple · Puerto Peñasco · tokens
   Brief: taller de herrería a la medida (portones, rejas, protecciones, estructuras,
   herrería artística). Ejes: expresivo 4 · frío-templado 2 · contemporáneo 4 ·
   denso 3 · accesible-premium 3. Tema OSCURO frío: grafito de acero + chispa ámbar
   + inversa de acero claro. Display condensada industrial, esquinas de placa
   cortada (chaflán), motion firme y preciso. */
:root {
  /* ---------- Neutros: grafito frío (h≈250, croma muy bajo) ---------- */
  --bg:            #0D0F12;
  --surface:       #15181D;
  --muted:         #111419;
  --muted-2:       #1C2027;
  --border:        #242931;
  --border-strong: #353B45;
  --border-input:  #6E7684;

  --ink:   #F1F3F6;
  --ink-2: #C9CED6;
  --ink-3: #98A0AD;
  --ink-4: #5C6470;

  /* ---------- Chispa (ámbar, h≈65). Tema oscuro: hover aclara, texto 300 ---------- */
  --brand-25:  #FFFAF1;
  --brand-50:  #FFF2DC;
  --brand-100: #FFE3B3;
  --brand-200: #FFCF7F;
  --brand-300: #FFBB4D;
  --brand-400: #FFAD33;
  --brand-500: #FF9E1B;
  --brand-600: #E08309;
  --brand-700: #B46606;
  --brand-800: #874C07;
  --brand-900: #5A3307;
  --brand-950: #2E1A04;
  --brand: var(--brand-500);
  --on-brand: #1A1000;
  --brand-hover: var(--brand-400);
  --brand-soft: rgba(255,158,27,.12);
  --brand-soft-border: rgba(255,158,27,.32);
  --brand-text: var(--brand-300);

  /* Acento: azul de arco de soldadura (< 5 % de superficie) */
  --accent:    #7CCBFF;
  --on-accent: #04121C;

  /* ---------- Semánticos (tonos claros para tema oscuro) ---------- */
  --ok: #4ADE80; --ok-50: rgba(74,222,128,.12); --ok-700: #86EFAC;
  --warn: #FBBF24; --warn-50: rgba(251,191,36,.12);
  --danger: #F87171; --danger-50: rgba(248,113,113,.12); --danger-700: #FCA5A5;

  /* ---------- Inversa: acero claro (banda de garantías, cotizador) ---------- */
  --inverse:        #E7EAEE;
  --inverse-2:      #DCE0E6;
  --inverse-3:      #C9CFD7;
  --inverse-border: rgba(13,15,18,.12);
  --on-inverse:     #0D0F12;
  --on-inverse-2:   rgba(13,15,18,.7);

  /* ---------- Tipografía ---------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-sans:    "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight:   800;
  --display-tracking: -0.01em;
  --display-leading:  .95;
  --display-settings: normal;
  --display-style:    normal;

  --fs-hero:  clamp(58px, 7.6vw, 118px);
  --fs-h2:    clamp(44px, 6vw, 88px);
  --fs-h3:    clamp(26px, 2.4vw, 34px);
  --fs-lead:  clamp(16px, 1.4vw, 18.5px);
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-meta:  11.5px;

  /* ---------- Forma: placa de acero (casi recta) + chaflán ---------- */
  --r-xs: 2px;
  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-2xl: 8px;
  --r-pill: 999px;
  --chamfer: 18px;

  /* ---------- Elevación (tema oscuro: negro con opacidad alta) ---------- */
  --shadow-rgb: 0,0,0;
  --sh-xs: 0 1px 2px rgba(0,0,0,.35);
  --sh-sm: 0 2px 6px rgba(0,0,0,.4);
  --sh-md: 0 8px 22px -6px rgba(0,0,0,.55);
  --sh-lg: 0 18px 38px -10px rgba(0,0,0,.65);
  --sh-xl: 0 40px 80px -20px rgba(0,0,0,.8);
  --sh-btn: inset 0 0 0 1px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(255,158,27,.32);

  /* ---------- Movimiento: firme y preciso ---------- */
  --ease:        cubic-bezier(.2,.8,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: .16s; --dur-2: .28s; --dur-3: .4s; --dur-4: .8s;

  /* ---------- Layout ---------- */
  --header-h: 72px;
  --container: 1280px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(72px, 8vw, 112px);
  --head-gap: clamp(40px, 5vw, 64px);
  --grid-gap: 14px;
}