/* ============================================================
   MILANO ENGENHARIA — DESIGN TOKENS
   Baseado no Manual de Identidade Visual
   "Os tons de cinza representam a tecnologia, a resistência
   e a durabilidade dos metais e do cimento."
   ============================================================ */

:root {
  /* ——— PALETA PRIMÁRIA: SLATE NAVY ——— */
  /* Slate neutro azulado (hue ~215°) com profundidade navy no extremo. */
  /* Evoca blueprint, aço galvanizado frio e céu de obra em Londrina.    */
  --ink-950: #060b16;     /* navy abissal     */
  --ink-900: #0a1628;     /* navy profundo    */
  --ink-800: #152238;     /* navy             */
  --ink-700: #1f304b;     /* slate escuro     */
  --ink-600: #334463;     /* slate            */
  --ink-500: #526279;     /* slate médio      */
  --ink-400: #7a879b;     /* slate claro      */
  --ink-300: #a6b1c1;     /* cinza azulado    */
  --ink-200: #cfd5df;     /* gelo             */
  --ink-100: #e3e7ee;     /* névoa fria      */
  --ink-50:  #f1f3f7;     /* alabastro frio   */
  --ink-0:   #ffffff;     /* branco puro      */

  /* ——— ACENTO: AZUL BLUEPRINT ——— */
  /* Azul técnico de engenharia — plantas, impressões helio, linhas de */
  /* código de projeto. Uso contido: CTAs, estados ativos, marcações.    */
  --signal-500: #1f5ca8;  /* azul blueprint   */
  --signal-400: #3b7fcf;  /* azul claro       */
  --signal-600: #14447e;  /* azul profundo    */
  --signal-100: #e4edf9;  /* azul névoa       */

  /* ——— SEMÂNTICAS ——— */
  --bg-canvas:      var(--ink-50);
  --bg-surface:     var(--ink-0);
  --bg-elevated:    var(--ink-0);
  --bg-inverse:     var(--ink-900);
  --bg-muted:       var(--ink-100);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-500);
  --text-disabled:  var(--ink-400);
  --text-inverse:   var(--ink-0);
  --text-accent:    var(--signal-600);

  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-600);
  --border-inverse: var(--ink-700);

  /* ——— TIPOGRAFIA ——— */
  /* Archivo: display condensada/densa — estrutura forte, angular. */
  /* Manrope: sans geométrica de leitura confortável (não é Inter). */
  /* JetBrains Mono: técnico (códigos de projeto, números, specs). */
  --font-display: 'Archivo', 'Gill Sans', 'Helvetica Neue', sans-serif;
  --font-body:    'Manrope', 'Calibri', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Escala tipográfica (base 16) — ritmo modular 1.250 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.22em;

  /* ——— ESPAÇAMENTO (base 4) ——— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ——— RAIO ——— */
  /* Raios discretos — engenharia é angular, não arredondada */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-full: 999px;

  /* ——— SOMBRA ——— */
  /* Sombras com tint navy sutil, direction top-down consistente */
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.08);
  --shadow-md: 0 2px 8px rgba(10, 22, 40, 0.1), 0 1px 2px rgba(10, 22, 40, 0.05);
  --shadow-lg: 0 12px 32px rgba(10, 22, 40, 0.14), 0 2px 6px rgba(10, 22, 40, 0.07);
  --shadow-xl: 0 24px 64px rgba(10, 22, 40, 0.2), 0 4px 12px rgba(10, 22, 40, 0.1);

  /* ——— GRID & LAYOUT ——— */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 48px);
  --grid-cols: 12;
  --grid-gap: 24px;

  /* ——— MOTION ——— */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;
}

/* ——— RESET LEVE ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }