/* ============================================================
   ART Mechatronics — design tokens
   The single source of truth for colour, type, spacing, motion.
   ============================================================ */
/* Self-hosted so the strict CSP (font-src 'self') keeps working and there is no
   extra DNS + TLS hop to fonts.gstatic.com on first paint. Latin subset only. */
@font-face {
  font-family: "Monda";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/monda-400.woff2") format("woff2");
}
@font-face {
  font-family: "Monda";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/monda-700.woff2") format("woff2");
}

:root {
  /* Brand blues — taken from the ÄRT logo itself (assets/logo.png is the catalogue artwork,
     #1657b0 / #2e86e6 / #14509f). Decided 2026-07-27: the orange on the old
     WordPress site came from "Machino", the off-the-shelf theme it was built on,
     and was inherited rather than chosen — the same way that theme's logo and
     "People Says About Machino" heading are still sitting on the live homepage.
     Blue is also the more accessible choice: #1657B0 is 6.94:1 on white and
     passes AA for body text, where the orange managed only 3.97:1. */
  --navy:        #14509f;   /* deep header/hero ground */
  --navy-2:      #0f3e7c;   /* darker ground for gradients */
  --blue:        #1657B0;   /* PRIMARY ACCENT — buttons, rules, badges */
  --blue-bright: #2E86E6;   /* hover / highlight (3.7:1 — large text & UI only) */
  --blue-soft:   #EAF2FD;   /* tinted panel background */

  /* Kept from the palette experiment: a single place to reach for when small
     text needs the brand colour. #1657B0 already passes AA, so these match. */
  --accent:      #1657B0;
  --accent-ink:  #1657B0;

  /* Steel / neutrals (the stainless-steel machine world) */
  --ink:      #10233F;      /* primary text — 15.7:1 on white */
  --slate:    #45566E;      /* secondary text */
  --steel:    #5C6678;      /* muted text / captions */
  --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 — Monda is the approved site's typeface, self-hosted above. */
  --font: "Monda", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Monda", "Avenir Next Condensed", "Avenir Next", 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);
}