/* ============================================================
   Maquinària Industrial, SA — Design Tokens
   Font: Claude Design Export (tokens/ merged)
   ============================================================ */

/* --- Google Fonts: Barlow --- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

:root {
  /* ── Colors ─────────────────────────────────────────── */
  --mi-blau-industrial:  #2F5F87;
  --mi-blau-mari-tecnic: #1F3448;
  --mi-gris-acer:        #5F6B73;
  --mi-blau-clar-tecnic: #D8E6F0;
  --mi-gris-molt-clar:   #F3F6F8;
  --mi-ambre-puntual:    #C28A2E;

  --mi-white:    #FFFFFF;
  --mi-ink:      #16242F;
  --mi-grey-100: #ECF0F3;
  --mi-grey-200: #E2E8ED;
  --mi-grey-300: #CBD5DD;

  --mi-blau-industrial-hover:  #27506F;
  --mi-blau-industrial-active: #1F3F5B;
  --mi-ambre-hover:            #A9771F;
  --mi-ambre-active:           #8F6418;
  --mi-navy-raise:             #2A4A63;
  --mi-clar-hover:             #C9DCEC;

  /* Semantic aliases */
  --color-bg:              var(--mi-gris-molt-clar);
  --color-surface:         var(--mi-white);
  --color-surface-alt:     var(--mi-blau-clar-tecnic);
  --color-surface-sunken:  var(--mi-grey-100);
  --color-surface-dark:    var(--mi-blau-mari-tecnic);

  --color-text:            var(--mi-blau-mari-tecnic);
  --color-text-strong:     var(--mi-ink);
  --color-text-muted:      var(--mi-gris-acer);
  --color-text-on-dark:    var(--mi-white);
  --color-text-on-dark-muted: #AEBDC9;

  --color-primary:         var(--mi-blau-industrial);
  --color-primary-hover:   var(--mi-blau-industrial-hover);
  --color-accent:          var(--mi-ambre-puntual);
  --color-accent-hover:    var(--mi-ambre-hover);

  --color-border:          var(--mi-grey-200);
  --color-border-strong:   var(--mi-grey-300);
  --color-border-focus:    var(--mi-blau-industrial);
  --color-focus-ring:      color-mix(in srgb, var(--mi-blau-industrial) 35%, transparent);

  /* ── Typography ─────────────────────────────────────── */
  --font-sans:      'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-condensed: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --fs-display: 52px;
  --fs-h1:      42px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-lead:    19px;
  --fs-body:    17px;
  --fs-base:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-overline:12px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-overline:0.12em;

  /* ── Spacing (8px base) ─────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 128px;

  --section-y:       var(--space-10);
  --section-y-tight: var(--space-8);

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-pill:999px;

  /* ── Borders ─────────────────────────────────────────── */
  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-border-strong);

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(31,52,72,0.06);
  --shadow-sm: 0 1px 3px rgba(31,52,72,0.08), 0 1px 2px rgba(31,52,72,0.04);
  --shadow-md: 0 4px 12px rgba(31,52,72,0.10);

  /* ── Layout ─────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: 24px;
  --header-h:      80px;

  /* ── Motion ─────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2,0,0.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ── Reset + base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-hover); }

img { max-width: 100%; display: block; height: auto; }

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }