/* ==========================================================================
   tokens.css — Factor MX · "concreto pulido + naranja fuego"
   Tema claro cálido (neutros h 60) · marca h 38 (OKLCH) · inversa carbón.
   Verificado con scripts/contrast.mjs
   ========================================================================== */

:root {
  /* ---------- Neutros (concreto cálido, h 60, C .006–.012) ---------- */
  --bg:            #F9F5F2;
  --surface:       #FFFFFF;
  --muted:         #F1EDE9;
  --muted-2:       #E8E3DF;
  --border:        #E4DEDA;
  --border-strong: #D0C9C4;
  --border-input:  #8A837E;  /* 3.8:1 sobre surface */

  --ink:   #1A1511;
  --ink-2: #423C37;
  --ink-3: #69625D;
  --ink-4: #A6A09B;

  /* ---------- Marca: naranja fuego (h 38) ---------- */
  --brand-25:  #FEF9F7;
  --brand-50:  #FEF0EC;
  --brand-100: #FFE0D7;
  --brand-200: #FFC3B0;
  --brand-300: #FF9D7F;
  --brand-400: #E74A04;      /* chispa: solo decorativo / grandes superficies */
  --brand-500: #CD4001;      /* botones: blanco 4.85:1 */
  --brand-600: #B53700;
  --brand-700: #A03102;      /* texto de marca pequeño sobre claro */
  --brand-800: #7A2302;
  --brand-900: #581701;
  --brand-950: #2E0C03;
  --brand: var(--brand-500);
  --on-brand: #FFFFFF;

  --brand-hover:       var(--brand-600);
  --brand-soft:        var(--brand-50);
  --brand-soft-border: var(--brand-100);
  --brand-text:        var(--brand-700);
  --brand-on-inverse:  var(--brand-300);  /* texto de marca sobre carbón */
  --spark:             var(--brand-400);

  /* Acento: vidrio (solo ilustración, chips de vidriería) */
  --accent:    #1F6E8C;
  --on-accent: #FFFFFF;

  /* Materiales de la ilustración "Una casa, cinco oficios" */
  --wall:   #EFE8E1;
  --wall-2: #DED4CB;
  --wood:   #A0673F;
  --wood-2: #7C4A2B;
  --glass:  #CBE6F0;
  --glass-2:#8CC3D8;
  --steel:  #2A2420;

  /* ---------- Semánticos ---------- */
  --ok: #15803D;   --ok-50: #ECFDF3;   --ok-700: #15803D;
  --warn: #D97706; --warn-50: #FFFBEB;
  --danger: #DC2626; --danger-50: #FEF2F2; --danger-700: #B91C1C;

  /* ---------- Inversa: carbón ---------- */
  --inverse:        #150F0D;
  --inverse-2:      #1E1816;
  --inverse-3:      #2C2522;
  --inverse-border: rgba(255,255,255,.10);
  --on-inverse:     #FFFFFF;
  --on-inverse-2:   rgba(255,255,255,.68);

  /* ---------- Tipografía ---------- */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight:   800;
  --display-tracking: -0.022em;
  --display-leading:  .96;
  --display-settings: "wdth" 112;
  --display-style:    normal;

  --fs-hero:  clamp(40px, 6.1vw, 94px);
  --fs-h2:    clamp(32px, 4.4vw, 62px);
  --fs-h3:    clamp(20px, 1.9vw, 25px);
  --fs-lead:  clamp(16px, 1.35vw, 18.5px);
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-meta:  12px;

  /* ---------- Forma (amplia, contemporánea) ---------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Elevación (tinta carbón cálida) ---------- */
  --shadow-rgb: 26,21,17;
  --sh-xs: 0 1px 2px rgba(var(--shadow-rgb),.05);
  --sh-sm: 0 1px 3px rgba(var(--shadow-rgb),.08), 0 1px 2px -1px rgba(var(--shadow-rgb),.06);
  --sh-md: 0 4px 12px -2px rgba(var(--shadow-rgb),.09), 0 2px 4px -2px rgba(var(--shadow-rgb),.05);
  --sh-lg: 0 12px 20px -6px rgba(var(--shadow-rgb),.13), 0 4px 6px -4px rgba(var(--shadow-rgb),.08);
  --sh-xl: 0 28px 56px -14px rgba(var(--shadow-rgb),.28);
  --sh-btn: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(var(--shadow-rgb),.08);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);

  /* ---------- Movimiento (energía alta) ---------- */
  --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: .15s;
  --dur-2: .25s;
  --dur-3: .38s;
  --dur-4: .7s;

  /* ---------- Layout ---------- */
  --header-h: 72px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 36px);
  --section-y: clamp(80px, 10vw, 136px);
  --head-gap: clamp(36px, 5vw, 60px);
  --grid-gap: 16px;
}