/* frontend-design-suite · mode: awwwards-craft + polish-motion
   direction: control-room HMI · signature: live SCADA mimic + solutions pin
   12 base hexes; components: var() + color-mix only */
:root {
  --ground: #070a0d;
  --panel: #0c1116;
  --elev: #121a22;
  --surface: #161f28;
  --ink: #0b0f13;
  --mid: #8b98a4;
  --line: #2a343e;
  --on-dark: #f0f3f5;
  --accent: #3aa0d8;
  --run: #2fbf71;
  --standby: #d4a017;
  --alarm: #e24a3b;

  /* aliases */
  --bg-deep: var(--ground);
  --bg-panel: var(--panel);
  --bg-elev: var(--elev);
  --bg-paper: var(--panel);
  --bg-paper-2: var(--elev);
  --paper: var(--panel);
  --ink-soft: color-mix(in srgb, var(--on-dark) 88%, var(--mid));
  --muted: var(--mid);
  --muted-on-dark: var(--mid);
  --line-bright: color-mix(in srgb, var(--line) 70%, var(--on-dark));
  --hair: color-mix(in srgb, var(--on-dark) 10%, transparent);
  --flow: var(--accent);
  --flow-ink: color-mix(in srgb, var(--accent) 72%, var(--on-dark));
  --flow-dim: color-mix(in srgb, var(--accent) 52%, var(--ground));

  --line-paper: color-mix(in srgb, var(--on-dark) 12%, var(--elev));
  --line-paper-soft: color-mix(in srgb, var(--on-dark) 10%, var(--panel));
  --line-paper-strong: color-mix(in srgb, var(--on-dark) 18%, var(--elev));
  --confirm-ink: color-mix(in srgb, var(--standby) 85%, var(--on-dark));
  --confirm-bg: color-mix(in srgb, var(--standby) 14%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 62%, var(--on-dark));

  --on-dark-02: color-mix(in srgb, var(--on-dark) 2%, transparent);
  --on-dark-03: color-mix(in srgb, var(--on-dark) 3.5%, transparent);
  --on-dark-06: color-mix(in srgb, var(--on-dark) 6%, transparent);
  --on-dark-08: color-mix(in srgb, var(--on-dark) 8%, transparent);
  --on-dark-12: color-mix(in srgb, var(--on-dark) 12%, transparent);
  --on-dark-18: color-mix(in srgb, var(--on-dark) 18%, transparent);
  --on-dark-25: color-mix(in srgb, var(--on-dark) 25%, transparent);
  --on-dark-28: color-mix(in srgb, var(--on-dark) 28%, transparent);
  --on-dark-35: color-mix(in srgb, var(--on-dark) 35%, transparent);
  --on-dark-40: color-mix(in srgb, var(--on-dark) 40%, transparent);
  --on-dark-45: color-mix(in srgb, var(--on-dark) 45%, transparent);
  --on-dark-55: color-mix(in srgb, var(--on-dark) 55%, transparent);
  --on-dark-60: color-mix(in srgb, var(--on-dark) 60%, transparent);
  --on-dark-72: color-mix(in srgb, var(--on-dark) 72%, transparent);
  --on-dark-78: color-mix(in srgb, var(--on-dark) 78%, transparent);
  --on-dark-88: color-mix(in srgb, var(--on-dark) 88%, transparent);

  --ground-20: color-mix(in srgb, var(--ground) 20%, transparent);
  --ground-35: color-mix(in srgb, var(--ground) 35%, transparent);
  --ground-72: color-mix(in srgb, var(--ground) 72%, transparent);
  --ground-75: color-mix(in srgb, var(--ground) 75%, transparent);
  --ground-86: color-mix(in srgb, var(--ground) 86%, transparent);
  --ground-88: color-mix(in srgb, var(--ground) 88%, transparent);
  --ground-92: color-mix(in srgb, var(--ground) 92%, transparent);
  --ground-96: color-mix(in srgb, var(--ground) 96%, transparent);

  --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-16: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-45: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-55: color-mix(in srgb, var(--accent) 55%, transparent);
  --run-18: color-mix(in srgb, var(--run) 18%, transparent);
  --run-80: color-mix(in srgb, var(--run) 80%, transparent);
  --ink-03: color-mix(in srgb, var(--ink) 3%, transparent);

  --sch-fill: color-mix(in srgb, var(--panel) 92%, transparent);
  --sch-fill-hi: color-mix(in srgb, var(--accent) 18%, var(--panel));
  --sch-stroke: var(--on-dark-28);

  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --max: 1320px;
  --gutter: clamp(1.15rem, 3.8vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 8.5rem);

  /* statement display — corpus h1 band */
  --display: clamp(3.4rem, 9.2vw, 7.6rem);
  --h2: clamp(2.4rem, 5vw, 4rem);

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out-quart: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-out: var(--ease-out-expo);
  --ease-soft: var(--ease-out-quint);

  --dur-hover: 160ms;
  --dur-ui: 320ms;
  --dur-media: 600ms;
  --dur-reveal: 800ms;
  --dur-page: 600ms;
  --dur-hero: 1200ms;
  --stagger: 80ms;
  --dur: var(--dur-reveal);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 1ms;
    --dur-ui: 1ms;
    --dur-media: 1ms;
    --dur-reveal: 1ms;
    --dur-page: 1ms;
    --dur-hero: 1ms;
    --stagger: 0ms;
    --dur: 1ms;
  }
}