/* ==========================================================================
   WNCC — design tokens
   Every colour and type value on the site resolves through this file.
   Change a value here and rebuild nothing: the CSS reads the variables live.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------
     Sampled from wncc-logo.png. The mark is entirely blue: deep navy
     linework and wordmark, mid marine blue for the water under the dhow.
     There is no gold and no second hue anywhere in WNCC's identity — that
     is what separates it from the Al Dorra parent mark.                    */
  --navy-900: #06152F;   /* masthead, hero, footer, page heads              */
  --navy-800: #0A2145;
  --navy-700: #0E2A57;   /* hover / raised navy                            */
  --marine:      #2F6BD0; /* accent on light surfaces  — 5.1:1 on white     */
  --marine-deep: #21529F; /* accent hover                                   */
  --marine-lift: #7FA9EE; /* accent on navy surfaces   — 7.6:1 on navy-900  */

  /* Warm neutral lifted from the desert ground in WNCC's own site
     photography. The single warm note against the cold blue; used for
     catalogue labels and index rules only, never for large areas.          */
  --sand-deep: #7A6535;  /* on light — 5.6:1 on white                       */
  --sand:      #C9B189;  /* on navy  — 8.8:1 on navy-900                    */
  --sand-wash: #F7F2E8;  /* plate behind index letters                      */

  /* --- Neutrals ---------------------------------------------------------
     Biased a few degrees toward the marine accent so they read as chosen
     rather than as a default grey.                                         */
  --ink:    #101724;     /* headings on light                               */
  --body:   #46505F;     /* running text                                    */
  --muted:  #6B7686;     /* metadata, captions                              */
  --paper:  #FFFFFF;     /* primary band, cards                             */
  --shell:  #F2F5FA;     /* alternating band                                */
  --sunk:   #E7EDF5;     /* inset wells, image placeholders                 */
  --line:   #DBE3ED;     /* hairline                                        */
  --line-2: #C2CEDD;     /* stronger hairline                               */
  --on-navy:      #E8EEF8; /* body text on navy                             */
  --on-navy-mute: #A7B6CD; /* metadata on navy                              */

  /* --- Feedback --------------------------------------------------------- */
  --ok:   #1B6647;
  --warn: #7E5310;
  --stop: #94302F;

  /* --- Type -------------------------------------------------------------
     Source Serif 4 carries the company voice — WNCC's own wordmark is a
     serif, so the display face echoes the mark rather than replacing it.
     IBM Plex Sans reads the body; it was drawn for an engineering company
     and has a true Arabic companion for a future RTL build.
     IBM Plex Mono sets the catalogue: part categories, index entries and
     spec labels, where it reads as a technical register rather than prose. */
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* Fluid display sizes; fixed utility sizes. */
  --t-hero:  clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* 40 → 68 */
  --t-h1:    clamp(2rem, 1.45rem + 2.2vw, 3rem);       /* 32 → 48 */
  --t-h2:    clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);  /* 24 → 34 */
  --t-h3:    1.3125rem;                                /* 21      */
  --t-lead:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);/* 17 → 19 */
  --t-body:  1.0625rem;                                /* 17      */
  --t-sm:    0.9375rem;                                /* 15      */
  --t-xs:    0.8125rem;                                /* 13      */
  --t-label: 0.75rem;                                  /* 12      */

  --lh-tight: 1.14;
  --lh-head:  1.22;
  --lh-body:  1.68;
  --measure:  66ch;

  /* --- Layout ----------------------------------------------------------- */
  --shell-w: 1240px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);   /* 20 → 40 */
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);     /* 56 → 104 */
  --radius: 3px;      /* square-ish reads precise; this is an equipment site */
  --radius-lg: 5px;
  --radius-pill: 999px;

  /* --- Elevation --------------------------------------------------------
     Two stops, both tinted navy so shadows sit in the palette.             */
  --shadow-1: 0 1px 2px rgba(6, 21, 47, .05), 0 2px 6px -2px rgba(6, 21, 47, .07);
  --shadow-2: 0 2px 4px rgba(6, 21, 47, .06), 0 14px 32px -14px rgba(6, 21, 47, .22);
  --shadow-nav: 0 1px 0 rgba(6, 21, 47, .07), 0 8px 24px -16px rgba(6, 21, 47, .35);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 160ms;
  --base: 240ms;

  --focus: 2px solid var(--marine);
  --focus-offset: 3px;
}