/* ============================================================
   ALUMFER — Design System Tokens
   Estilo: Moderno industrial (hormigón + azul)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Rajdhani:wght@700&family=Exo+2:wght@800&display=swap');

@font-face {
  font-family: 'BatmanForever';
  src: url('batman-forever.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BatmanForeverOutline';
  src: url('batman-forever-outline.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─── Paleta ─────────────────────────────────────────────── */
:root {
  /* Oscuros */
  --carbon:         #1A1C1E;
  --steel:          #2E3338;
  --steel-light:    #3D444B;

  /* Hormigón */
  --concrete:       #B0A99A;
  --concrete-light: #E8E4DC;
  --concrete-faint: #F5F4F1;

  /* Azul aluminio (acento principal) */
  --blue:           #1B6CC8;
  --blue-light:     #4A9DE8;
  --blue-faint:     #D6E8F7;

  /* Semánticos */
  --bg-dark:        var(--carbon);
  --bg-mid:         var(--steel);
  --bg-light:       var(--concrete-faint);
  --bg-accent:      var(--concrete-light);

  --text-on-dark:   #FFFFFF;
  --text-on-dark-2: rgba(255,255,255,0.60);
  --text-on-dark-3: rgba(255,255,255,0.35);
  --text-primary:   var(--carbon);
  --text-secondary: #5A5A55;
  --text-muted:     var(--concrete);

  --border-dark:    rgba(255,255,255,0.08);
  --border-light:   rgba(26,28,30,0.10);

  /* Línea de identidad (firma visual) */
  --rule:           var(--blue);
  --rule-width:     3px;
}

/* ─── Tipografía ─────────────────────────────────────────── */
:root {
  --font:           'Inter', system-ui, sans-serif;

  /* Escala */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.375rem;    /* 22px */
  --text-xl:   1.75rem;     /* 28px */
  --text-2xl:  2.25rem;     /* 36px */
  --text-3xl:  3rem;        /* 48px */
  --text-4xl:  4rem;        /* 64px */

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.20em;
}

/* ─── Espaciado ──────────────────────────────────────────── */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-y: clamp(3rem, 6vw, 5rem);
}

/* ─── Layout ─────────────────────────────────────────────── */
:root {
  --max-w:      1200px;
  --max-w-text: 680px;
  --gutter:     clamp(1.25rem, 5vw, 3rem);
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Transiciones */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration:   220ms;
}