/* ==========================================================
   Mundo dos Tubos — design tokens
   Brand: navy + signal blue + white, with steel as the material.
   Orange lives only inside the logo's globe.
   ========================================================== */

:root {
  /* Navy scale (backgrounds) */
  --abyss: #040814;
  --navy-950: #060c1f;
  --navy-900: #0a132d;
  --navy-800: #0f1b3f;
  --navy-700: #172a5f;          /* facade navy */

  /* Brand blue */
  --blue: #2f7ff0;              /* derived from the brand's light blue */
  --blue-hi: #6db4ff;
  --blue-glow: rgba(47, 127, 240, 0.35);

  /* Steel */
  --steel-50: #f1f4f7;
  --steel-100: #e3e8ee;
  --steel-200: #cbd3dc;
  --steel-400: #8d99aa;
  --steel-600: #566377;

  /* Ink */
  --ink: #f3f6fa;
  --ink-2: #a8b4c7;
  --ink-3: #6c7a91;
  --ink-dark: #0b1430;

  --line: rgba(160, 190, 255, 0.10);
  --line-strong: rgba(160, 190, 255, 0.22);

  --whatsapp: #25d366;

  /* Type — one family, the width axis does the work */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wdth-display: 118;
  --wdth-body: 100;
  --wdth-tight: 82;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --fs-28: clamp(1.4rem, 1.1rem + 1vw, 1.875rem);
  --fs-44: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --fs-72: clamp(2.6rem, 1.1rem + 5.2vw, 6rem);
  --fs-hero: clamp(2.8rem, 0.9rem + 6.4vw, 7.4rem);

  /* Space — 4px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 160px;
  --gutter: clamp(16px, 4.5vw, 64px);
  --maxw: 1360px;

  /* Radius — tiered */
  --r-xl: 28px;   /* large frames, photos */
  --r-lg: 20px;   /* product plates, panels */
  --r-md: 12px;   /* buttons, inputs */
  --r-sm: 8px;    /* chips */
  --r-pill: 999px;

  /* Light */
  --shadow-plate: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass: linear-gradient(160deg, rgba(120, 160, 255, 0.12), rgba(120, 160, 255, 0.03));
  --steel-face: linear-gradient(165deg, #f4f6f9 0%, #dfe5ec 45%, #c9d1db 100%);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 1000ms;
}