/* ==========================================================================
   OmniLithTech — Brand tokens
   Single source of truth. Every colour on the site resolves to one of the
   nine hexes below, which are transcribed verbatim from the Identity Manual
   (Brand Guidelines 2026, pp. 13–15). Derived tones are produced with
   color-mix() from those tokens — no other raw hex value exists in the
   codebase.
   ========================================================================== */

:root {
  /* ---- Primary palette (manual p.13) ---------------------------------- */
  /* Logo, key brand elements, headings, primary communication.            */
  --midnight-blue: #0c182e;
  --prussian-blue: #153157;
  --teal: #009e9e;
  --pure-white: #ffffff;

  /* ---- Secondary palette (manual p.14) -------------------------------- */
  /* Content backgrounds, alternate sections, cards, supporting UI.        */
  --graphite: #555b66;
  --cool-grey: #c7d0dc;
  --light-blue-grey: #dce9f6;
  --off-white: #f4f7fa;

  /* ---- Accent (manual p.15) ------------------------------------------- */
  /* Emphasis, key data points, active cues. Used sparingly. Never given   */
  /* the CTA role — that belongs to Teal.                                  */
  --cyan: #2dd4f0;

  /* ======================================================================
     Semantic surfaces
     The manual (p.23) frames the interface with the primary palette and
     separates content with the secondary palette. Light and dark sections
     alternate down the page.
     ====================================================================== */
  --surface-dark: var(--midnight-blue);
  --surface-dark-alt: var(--prussian-blue);
  --surface-dark-raised: color-mix(in srgb, var(--prussian-blue) 38%, var(--midnight-blue));
  --surface-dark-sunken: color-mix(in srgb, var(--prussian-blue) 16%, var(--midnight-blue));

  --surface-light: var(--pure-white);
  --surface-light-alt: var(--off-white);
  --surface-light-tint: var(--light-blue-grey);
  --surface-panel: var(--cool-grey);

  /* ---- Rules and hairlines -------------------------------------------- */
  --rule-dark: var(--prussian-blue);
  --rule-dark-soft: color-mix(in srgb, var(--prussian-blue) 60%, var(--midnight-blue));
  --rule-light: color-mix(in srgb, var(--cool-grey) 72%, var(--pure-white));
  --rule-light-strong: var(--cool-grey);

  /* ---- Text ------------------------------------------------------------
     Contrast checked against the manual's own pairings:
       Cool Grey  #c7d0dc on Midnight #0c182e ≈ 12.4:1
       Teal       #009e9e on Midnight #0c182e ≈  5.4:1   (AA body on dark)
       Graphite   #555b66 on Off White #f4f7fa ≈  6.4:1  (muted on light)
       Teal       #009e9e on white          ≈  3.3:1   — FAILS AA for normal
                                                          text. Never used
                                                          for small type on a
                                                          light surface.
     -------------------------------------------------------------------- */
  --text-on-dark: var(--pure-white);
  --text-on-dark-muted: var(--cool-grey);
  --text-on-dark-soft: color-mix(in srgb, var(--cool-grey) 78%, var(--midnight-blue));
  --text-on-light: var(--midnight-blue);
  --text-on-light-muted: var(--graphite);

  /* ---- Interactive ----------------------------------------------------- */
  --action: var(--teal);
  --action-label: var(--midnight-blue); /* Teal fill takes a Midnight label:
                                           ≈5.4:1, and more distinctive than
                                           the default white-on-teal.        */
  --action-hover-fill: var(--midnight-blue);
  --action-hover-label: var(--teal);
  --focus-on-dark: var(--cyan);
  --focus-on-light: var(--prussian-blue);

  /* ---- Colour progression system (manual p.26) -------------------------
     Neutral → primary Teal, used for timelines, workflows and process
     indicators. Four stops for the four engagement stages.               */
  --stage-0: var(--cool-grey);
  --stage-1: color-mix(in srgb, var(--prussian-blue) 55%, var(--cool-grey));
  --stage-2: var(--prussian-blue);
  --stage-3: var(--teal);

  /* ======================================================================
     Typography (manual p.17–19)
     Sora  — H1 Bold, H2 SemiBold. Nothing else.
     Inter — H3 SemiBold, body Regular, captions / UI / tables / numeric
             data Medium.
     ====================================================================== */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --size-h1: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem);
  --size-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --size-h3: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
  --size-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --size-body: 1.0625rem; /* 17px */
  --size-small: 0.9375rem; /* 15px */
  --size-caption: 0.75rem; /* 12px */
  --size-data: clamp(2rem, 1.35rem + 2.5vw, 3.25rem);
  --size-data-sm: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);

  --lh-h1: 1.02;
  --lh-h2: 1.1;
  --lh-h3: 1.28;
  --lh-body: 1.65;

  --track-h1: -0.02em; /* tight tracking on large Sora headings */
  --track-h2: -0.018em;
  --track-h3: -0.01em;
  --track-caption: 0.14em;

  --measure: 68ch; /* comfortable body measure, 65–75 characters */
  --measure-tight: 56ch;

  /* ======================================================================
     Spacing — 4px base
     ====================================================================== */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  --section-y: clamp(4.5rem, 8vw, 10rem);
  --section-y-tight: clamp(3rem, 5vw, 5.5rem);
  --container: 1280px;
  --container-wide: 1480px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 72px;

  /* ======================================================================
     Radii — the manual's UI system has no rounded corner anywhere.
     One token, set to zero, so the decision is explicit rather than absent.
     ====================================================================== */
  --radius: 0px;

  /* The logo's 45° diagonal cut, borrowed as a corner treatment. Used on
     exactly three surfaces site-wide. */
  --cut: 28px;

  /* ======================================================================
     Motion — one easing curve, used everywhere.
     ====================================================================== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 260ms;
  --dur-reveal: 460ms;
  --reveal-dist: 14px;

  /* Cards lift with a shadow shift, never a scale jump. */
  --shadow-rest: 0 1px 2px color-mix(in srgb, var(--midnight-blue) 8%, transparent);
  --shadow-lift: 0 12px 30px color-mix(in srgb, var(--midnight-blue) 15%, transparent);
}

/* Motion tokens collapse when the visitor asks for reduced motion. Every
   transition and animation in site.css reads from these, so the whole system
   stands down from one place. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-reveal: 1ms;
    --reveal-dist: 0px;
  }
}