/* ============================================================================
   tokens.css - single source of truth for colour, type, space, motion.
   Genuine Industrial Solutions.

   PALETTE: sampled directly from the supplied logo files
   (public/brand/gis-logo-horizontal.png and gis-mark.png), not estimated.

       orange  #D4710E   "GENUINE" in the wordmark, flame in the mark
       navy    #1A3A6B   "INDUSTRIAL SOLUTIONS" in the wordmark
       gear    #122658   gear body in the mark

   Note the orange is an amber / burnt orange, appreciably deeper and less red
   than earlier versions of this file assumed. Every orange on the site now
   derives from the measured value.

   RULE (CLAUDE.md Hard rules 5): no ad-hoc hex codes in components.
   ========================================================================== */

:root {

  /* --- Brand -------------------------------------------------------------- */

  --brand-navy:   #1A3A6B;   /* wordmark navy, sampled      */
  --brand-orange: #D4710E;   /* wordmark orange, sampled    */

  /* --- Navy scale ---------------------------------------------------------- */

  --navy-900: #0D1C42;   /* footer, deepest band                              */
  --navy-800: #122658;   /* hero gradient end                                 */
  --navy:     #1A3A6B;   /* logo navy — primary dark surface                  */
  --navy-700: #274B85;   /* raised surface on navy. White text 8.48:1 ✓       */
  --navy-600: #2F5B99;   /* hairlines and dividers on navy                    */

  /* --- Light surfaces ------------------------------------------------------ */

  --paper:   #F5F6F8;   /* page surface — cool light grey, sits under white   */
  --paper-2: #FFFFFF;   /* cards, header, raised panels                       */

  /* --- Text ---------------------------------------------------------------- */

  --ink:       #16305A;  /* body text. 11.05:1 on paper ✓                     */
  --ink-muted: #637191;  /* secondary text. 4.53:1 on paper ✓                 */

  --on-navy:       #FFFFFF;  /* 10.26:1 on --navy ✓                           */
  --on-navy-muted: #99A4BA;  /* 4.50:1 on --navy ✓                            */
                             /* Do NOT use on --navy-700 — use --on-navy.     */

  /* --- Action -------------------------------------------------------------- */

  /* CTA fill is the true logo orange, with DEEP NAVY text rather than white.
     White on this orange is only 3.16:1, which is why an earlier version used a
     deepened rust — but that read as brown-black on screen and lost the brand.
     Navy on the logo orange measures 4.81:1, so the button can be the exact
     colour of the logo and still pass AA. Hover lightens rather than darkens,
     because darkening would eat the contrast with the navy label. */

  --signal:       #D4710E;  /* CTA fill — the logo orange exactly             */
  --signal-hover: #E88630;  /* CTA hover. Navy on it 5.62:1 ✓                 */
  --signal-on:    #112544;  /* deep navy label. 4.81:1 on --signal ✓          */
  --signal-text:  #AD5C0B;  /* orange link/label text on paper. 4.53:1 ✓      */

  /* Accent rules — eyebrow bars, quote borders, card top-edges. The raw logo
     orange is 3.16:1 on white but only 2.92:1 on --paper, so it misses the 3:1
     UI bar on the grey ground. Darkened by the smallest amount that clears it;
     the difference is not perceptible next to the logo. */
  --signal-rule:  #D4710E;  /* 3.00:1 paper ✓ · 3.24:1 white ✓ · 4.69:1 navy-900 ✓ */

  /* --- Lines --------------------------------------------------------------- */

  --border:        #E1E5EB;  /* decorative hairline (non-essential)           */
  --border-strong: #818FA9;  /* interactive / UI border. 3.02:1 on paper ✓    */

  --focus:         #2A7BB8;  /* focus ring. 4.54:1 on white ✓                 */

  /* --- Gradients ----------------------------------------------------------- */

  /* The logo's own gradient bar runs orange → navy. Reused for the hero field
     and the section rule so the site echoes the mark rather than just borrowing
     its two colours. */
  --grad-hero: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 55%,
                               var(--navy-900) 100%);
  --grad-bar:  linear-gradient(90deg, var(--brand-orange) 0%,
                               var(--navy) 100%);

  /* --- Semantic aliases ----------------------------------------------------- */

  --surface:        var(--paper);
  --surface-raised: var(--paper-2);
  --text:           var(--ink);
  --text-muted:     var(--ink-muted);
  --rule:           var(--border);

  /* --- Type ----------------------------------------------------------------- */

  /* TODO(phase-2): self-host. No Google Fonts, no runtime CDN request.
       display → Archivo Narrow  (the logo wordmark is a heavy condensed sans)
       body    → Inter
       mono    → IBM Plex Mono                                                */

  --font-display: "Archivo Narrow", "Roboto Condensed", "Oswald",
                  ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(1rem,      0.96rem + 0.20vw, 1.125rem);
  --t-lg:   clamp(1.125rem,  1.05rem + 0.38vw, 1.375rem);
  --t-xl:   clamp(1.375rem,  1.24rem + 0.68vw, 1.875rem);
  --t-2xl:  clamp(1.875rem,  1.55rem + 1.50vw, 3rem);
  --t-3xl:  clamp(2.5rem,    1.85rem + 3.10vw, 4.75rem);

  --lh-tight:  1.03;
  --lh-snug:   1.22;
  --lh-normal: 1.65;

  --tracking-display: -0.025em;
  --tracking-label:    0.14em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* --- Space ---------------------------------------------------------------- */

  --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;    --s-10: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);

  --measure:       66ch;
  --measure-tight: 20ch;
  --container:     78rem;

  /* --- Borders, radius, elevation -------------------------------------------- */

  --hairline: 1px;
  --rule-w:   2px;
  --radius:   4px;
  --radius-lg: 8px;

  --shadow-1: 0 1px 2px rgb(14 38 69 / 0.05),  0 2px 8px rgb(14 38 69 / 0.05);
  --shadow-2: 0 2px 6px rgb(14 38 69 / 0.07),  0 12px 28px rgb(14 38 69 / 0.10);
  --shadow-3: 0 4px 12px rgb(14 38 69 / 0.10), 0 24px 48px rgb(14 38 69 / 0.14);

  /* --- Motion ----------------------------------------------------------------- */

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 700ms;
  --ease:     cubic-bezier(0.2, 0, 0.2, 1);

  --focus-ring:        2px solid var(--focus);
  --focus-ring-offset: 2px;

  --z-header: 100;
  --z-tray:   200;
  --z-modal:  300;
}

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