/* ==========================================================================
   FORTHWAY — Design tokens
   Every colour, size and curve used in this site is declared here once.
   Change a value here and it propagates everywhere. Do not hardcode
   colours or durations in the other stylesheets.
   ========================================================================== */

:root {
  /* --- Colour -------------------------------------------------------------
     Grounded in warehouse / back-of-house signage rather than generic
     "dark tech site". Amber is the safety-signage accent and means MOTION.
     Cyan is the terminal-readout accent and means SETTLED / CONFIRMED.
     Two accents that carry meaning, not one accent used for decoration. */

  --ground:      #0E1116;   /* page background, cold slate-black          */
  --surface:     #161B22;   /* raised panels, cards                       */
  --surface-hi:  #1D242E;   /* hover / elevated state                     */
  --line:        #262E38;   /* hairlines, borders                         */
  --line-bright: #38424F;   /* emphasised borders                         */

  --paper:       #EDEFF2;   /* primary text, very slightly blue-white     */
  --fog:         #8792A2;   /* secondary text                             */
  --fog-dim:     #5B6674;   /* tertiary text, captions                    */

  --amber:       #FF9E2C;   /* PRIMARY accent — in motion, needs action   */
  --amber-dim:   #B36D1C;
  --cyan:        #4ADEDE;   /* SECONDARY accent — settled, confirmed      */
  --cyan-dim:    #2A8A8A;

  --amber-glow:  rgba(255, 158, 44, 0.14);
  --cyan-glow:   rgba(74, 222, 222, 0.12);

  /* --- Type ---------------------------------------------------------------
     Display : Archivo, run at an expanded width axis. Industrial signage.
     Body    : Instrument Sans. Warm, readable, not Inter.
     Mono    : IBM Plex Mono. Data, counters, labels, eyebrows. */

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale. clamp() means no JS and no layout jump on resize. */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.31vw, 1.19rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.49vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.75vw, 1.89rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.13vw, 2.38rem);
  --step-4:  clamp(2.07rem, 1.74rem + 1.66vw, 3.00rem);
  --step-5:  clamp(2.49rem, 2.01rem + 2.40vw, 3.78rem);
  --step-6:  clamp(2.99rem, 2.31rem + 3.40vw, 4.77rem);
  --step-7:  clamp(3.58rem, 2.63rem + 4.76vw, 6.00rem);

  /* --- Space --------------------------------------------------------------
     A single spacing ramp. Sections use --space-section so vertical rhythm
     stays consistent and CSS specificity fights don't break it. */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --space-section: clamp(5rem, 3.5rem + 7vw, 9rem);
  --gutter:        clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
  --measure:       68ch;   /* max line length for body copy */
  --max-width:     1440px;

  /* --- Motion -------------------------------------------------------------
     Built-in CSS easings are too weak to read as intentional. These are the
     strong variants. NEVER use ease-in on UI — it delays the first frame,
     which is the exact moment the eye is watching. */

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* UI stays under 300ms. Only the scroll-reveals (marketing, seen once)
     are allowed to run longer. */
  --dur-press:  120ms;
  --dur-hover:  180ms;
  --dur-ui:     240ms;
  --dur-reveal: 460ms;

  /* --- Misc --- */
  --radius:    4px;   /* restrained. this is signage, not a SaaS dashboard */
  --radius-lg: 8px;
  --border:    1px solid var(--line);
  --header-h:  68px;
}

/* Reduced motion: keep opacity and colour (they aid comprehension),
   drop movement. This is a global kill-switch the modules also read. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-reveal: 200ms;
  }
}