/* ============================================================
   ART Mechatronics — design tokens
   The single source of truth for colour, type, spacing, motion.
   ============================================================ */
:root {
  /* Brand blues (from the ÄRT metallic-blue logo) */
  --navy:        #0B2C5E;   /* deep header navy */
  --navy-2:      #0A2148;   /* darker navy for gradients */
  --blue:        #1657B0;   /* primary brand blue */
  --blue-bright: #2E86E6;   /* accent / links / highlights */
  --blue-soft:   #EAF2FD;   /* tinted panel background */

  /* Steel / neutrals (the stainless-steel machine world) */
  --ink:      #10233F;      /* primary text */
  --slate:    #45566E;      /* secondary text */
  --steel:    #5C6678;      /* muted text / captions (AA on white ≈4.6:1) */
  --line:     #DDE3EC;      /* hairline borders */
  --mist:     #F4F7FB;      /* page tint */
  --white:    #FFFFFF;

  /* Flow legend (matches the system poster exactly) */
  --flow-powder:  #16A34A;  /* green  — powder flow */
  --flow-air:     #2E86E6;  /* blue   — air flow */
  --flow-dust:    #8B5CF6;  /* purple — dust flow */
  --flow-signal:  #F59E0B;  /* amber  — control signal */

  /* Status (control panel) */
  --run:   #22C55E;
  --stop:  #EF4444;
  --warn:  #F59E0B;
  --idle:  #64748B;

  /* Metallic steel gradient for surfaces */
  --steel-grad: linear-gradient(150deg,#f3f6fa 0%,#dbe2ec 40%,#c3ccd9 60%,#e7ecf3 100%);

  /* Type */
  --font: "Avenir Next", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "DIN Alternate", "Avenir Next Condensed", "Avenir Next", "Segoe UI Variable", sans-serif;
  --font-mono: "SF Mono", "Consolas", "Roboto Mono", ui-monospace, monospace;

  /* Fluid type scale */
  --fs-hero:  clamp(2.55rem, 1.5rem + 4vw, 4.7rem);
  --fs-h2:    clamp(1.8rem, 1.2rem + 2.3vw, 3rem);
  --fs-h3:    clamp(1.2rem, 1rem + 0.9vw, 1.5rem);
  --fs-lead:  clamp(1.02rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.85rem;

  /* Spacing scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* Radius + shadow */
  --r-sm: 5px; --r: 9px; --r-lg: 14px; --r-xl: 18px;
  --shadow-sm: 0 1px 3px rgba(16,35,63,.08), 0 1px 2px rgba(16,35,63,.06);
  --shadow:    0 10px 30px rgba(16,35,63,.10);
  --shadow-lg: 0 24px 60px rgba(11,44,94,.18);

  --wrap: 1280px;      /* content max width */
  --ease: cubic-bezier(.22,.61,.36,1);
}