/* =====================================================================
   Velox Cybernetics / MAMS  ·  Design tokens
   "The Instrument": graphite chassis, gold as the single signal.
   Color in OKLCH. Gold is rare; it marks the product winning and
   crescendos at the booking CTA.
   ===================================================================== */

/* ----- Web font: Alliance No. 2 (single Regular weight) -------------- */
@font-face {
  font-family: "Alliance No.2";
  src: url("../fonts/AllianceNo2-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Graphite chassis (cool-leaning, near-monochrome) ----------- */
  --graphite-1000: oklch(0.11 0.006 256);   /* deepest: booking void   */
  --graphite-950:  oklch(0.145 0.007 256);  /* page background          */
  --graphite-900:  oklch(0.175 0.008 256);  /* hero / alt band          */
  --graphite-850:  oklch(0.205 0.009 256);  /* raised surface           */
  --graphite-800:  oklch(0.24 0.010 256);   /* panels                   */
  --graphite-750:  oklch(0.285 0.011 256);  /* hover surface            */
  --graphite-700:  oklch(0.34 0.012 256);   /* strong divider           */

  /* ---- Ink (near-white, faint cool tint) -------------------------- */
  --ink:        oklch(0.975 0.003 256);     /* headings, primary copy   */
  --ink-soft:   oklch(0.86 0.004 256);      /* body copy                */
  --ink-muted:  oklch(0.74 0.006 256);      /* secondary, labels (AA)   */
  --ink-dim:    oklch(0.60 0.006 256);      /* large decorative only    */

  /* ---- Hairlines ---------------------------------------------------- */
  --line:       oklch(0.30 0.010 256 / 0.55);
  --line-soft:  oklch(0.30 0.010 256 / 0.32);
  --line-bright: oklch(0.45 0.012 256 / 0.6);

  /* ---- Gold: the single signal ------------------------------------ */
  --gold:        oklch(0.82 0.135 86);      /* primary signal           */
  --gold-bright: oklch(0.90 0.13 90);       /* highlight / glint        */
  --gold-deep:   oklch(0.70 0.125 78);      /* pressed / border         */
  --gold-ink:    oklch(0.20 0.04 80);       /* text on gold fills       */
  --gold-glow:   oklch(0.82 0.16 86 / 0.55);
  --gold-wash:   oklch(0.82 0.135 86 / 0.10);

  /* ---- Channel tints (used at low strength, never dominant) -------- */
  --ch-instagram: oklch(0.68 0.20 18);
  --ch-messenger: oklch(0.70 0.15 250);
  --ch-imessage:  oklch(0.74 0.17 145);

  /* ---- Semantic surface roles ------------------------------------- */
  --bg:          var(--graphite-950);
  --surface:     var(--graphite-850);
  --surface-2:   var(--graphite-800);

  /* ---- Type ------------------------------------------------------- */
  --font-sans: "Alliance No.2", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (single weight: hierarchy from size + tracking) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 3rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.5vw, 4rem);
  --display: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);   /* hero hook (<=6rem) */
  --numeral: clamp(2.8rem, 1.9rem + 4.4vw, 5.75rem);  /* big stat figures   */

  /* ---- Spacing rhythm --------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: clamp(4rem, 2.5rem + 7vw, 8rem);   /* section padding  */
  --space-3xl: clamp(6rem, 3rem + 12vw, 11rem);

  --measure: 62ch;
  --container: 78rem;
  --container-narrow: 54rem;

  /* ---- Radii (restrained; the instrument is mostly square) -------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Motion ----------------------------------------------------- */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;

  /* ---- Semantic z-index scale ------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-scrollcue: 200;
  --z-overlay: 1000;
}

/* ----- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--ink);
  font-weight: 400;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--gold);
  color: var(--gold-ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}