/* ============================================================
   RYANWAT DESIGN TOKENS — v2.0
   File: assets/css/tokens.css
   
   ALL design decisions live here. Every other CSS file
   references only these variables. Never hardcode a hex
   value, pixel size, or font name outside this file.
   ============================================================ */

:root {

  /* ── COLOUR PALETTE ─────────────────────────────────────────
     
     Derived DIRECTLY from the RayneWatt logo:
     
       Navy  #1B2E5E  → primary text + nav/footer dark bg
       Gray  #6B7B8D  → secondary text, borders, muted UI
       Amber #F5A31A  → refined to #E8960D, accent/CTA
     
     White canvas dominates. Navy appears in headlines and
     nav — natural resonance with the logo. Amber is the
     ACTION color. Gray is the SUPPORTING color.
     
     This is NOT a navy + gold website. It is a WHITE website
     with navy authority and amber energy.
  ──────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --bg-canvas:       #FFFFFF;      /* Primary page background — clean white */
  --bg-subtle:       #F2F4F7;      /* Section alternation — cool-gray tint */
  --bg-nav:          #0E172A;      /* Nav + footer: navy deepened past logo #1B2E5E */
  --bg-dark:         #0E172A;      /* Dark sections (statement band, footer) */
  --bg-dark-mid:     #162038;      /* Slightly lighter surface within dark sections */
  --bg-accent-wash:  #FDF6E8;      /* Very pale amber wash for soft highlights */

  /* Typography — pulled from logo */
  --text-primary:    #1B2E5E;      /* EXACT logo navy — headings, strong UI text */
  --text-body:       #2A3550;      /* Body paragraphs: navy darkened slightly */
  --text-secondary:  #6B7B8D;      /* EXACT logo gray — subheads, labels, meta */
  --text-muted:      #98A6B3;      /* Lighter logo-gray tint — captions, fine print */
  --text-inverse:    #EEF0F6;      /* Light text on dark backgrounds */
  --text-inverse-muted: #7A8BA0;  /* Muted text on dark backgrounds */

  /* Accent — refined from logo amber */
  --accent:          #E8960D;      /* Primary accent — logo amber, slightly richer */
  --accent-hover:    #C97D08;      /* Hover / pressed state */
  --accent-light:    #FDF4E0;      /* Very pale amber for hover washes */
  --accent-dark:     #7A4D00;      /* Amber as TEXT on light backgrounds */
  --accent-line:     #E8960D;      /* The signature "datum line" color — always amber */

  /* Structural / UI */
  --border-light:    #DDE2EA;      /* Default border */
  --border-mid:      #C5CDD8;      /* Stronger border */
  --surface:         #F8F9FB;      /* Elevated surface (cards on light bg) */
  --surface-dark:    #1A2640;      /* Card surface inside dark sections */
  --color-error:     #E84444;      /* Form validation error state */
  /* Logo exact values — reference only, do not use as dominant bg */
  --logo-navy:       #1B2E5E;      /* Logo R letter */
  --logo-gray:       #6B7B8D;      /* Logo W letter */
  --logo-amber:      #F5A31A;      /* Logo lightning bolt */

  /* ── TYPOGRAPHY ─────────────────────────────────────────────
     
     Fonts: Barlow Condensed (display) + Epilogue (body)
     Source: Google Fonts — free, reliable CDN
     
     Barlow Condensed → industrial/aerospace print tradition.
     Condensed form gives vertical energy to headlines.
     ExtraBold weight feels engineered, not editorial.
     
     Epilogue → humanist grotesque by Tyler Finck. Warm and
     readable; slightly unusual letterform details add
     personality at body size.
     
     NO third typeface — Barlow Condensed Light handles
     data/labels. Two fonts total. Maximum visual unity.
  ──────────────────────────────────────────────────────────── */

  --font-display:    'Barlow Condensed', sans-serif;  /* Headlines, stats, labels */
  --font-body:       'Epilogue', sans-serif;           /* Body copy, nav, buttons */

  /* ── TYPE SCALE (fluid via clamp — no media queries for size) */

  --text-xs:    clamp(0.65rem,  1.4vw, 0.72rem);   /*  ~11px → 11.5px */
  --text-sm:    clamp(0.78rem,  1.8vw, 0.875rem);  /*  ~12px → 14px   */
  --text-base:  clamp(0.9rem,   2vw,   1rem);       /*  ~14px → 16px   */
  --text-md:    clamp(1rem,     2.2vw, 1.125rem);   /*  ~16px → 18px   */
  --text-lg:    clamp(1.1rem,   2.5vw, 1.25rem);    /*  ~17px → 20px   */
  --text-xl:    clamp(1.25rem,  3vw,   1.5rem);     /*  ~20px → 24px   */
  --text-2xl:   clamp(1.5rem,   3.5vw, 2rem);       /*  ~24px → 32px   */
  --text-3xl:   clamp(1.875rem, 4.5vw, 2.5rem);     /*  ~30px → 40px   */
  --text-4xl:   clamp(2.25rem,  5.5vw, 3.25rem);    /*  ~36px → 52px   */
  --text-5xl:   clamp(2.75rem,  7vw,   4.5rem);     /*  ~44px → 72px   */
  --text-hero:  clamp(3rem,     8.5vw, 6rem);       /*  ~48px → 96px   */

  /* ── SPACING ──────────────────────────────────────────────── */

  --space-1:    0.25rem;   /*   4px */
  --space-2:    0.5rem;    /*   8px */
  --space-3:    0.75rem;   /*  12px */
  --space-4:    1rem;      /*  16px */
  --space-5:    1.25rem;   /*  20px */
  --space-6:    1.5rem;    /*  24px */
  --space-8:    2rem;      /*  32px */
  --space-10:   2.5rem;    /*  40px */
  --space-12:   3rem;      /*  48px */
  --space-16:   4rem;      /*  64px */
  --space-20:   5rem;      /*  80px */
  --space-24:   6rem;      /*  96px */
  --space-32:   8rem;      /* 128px */

  /* ── LAYOUT ───────────────────────────────────────────────── */

  --container-max:   1280px;
  --container-wide:  1440px;
  --container-pad:   clamp(1.25rem, 5vw, 3.5rem);   /* Fluid side padding */
  --section-gap:     clamp(4rem, 9vw, 7.5rem);       /* Section vertical rhythm */

  /* ── EFFECTS ──────────────────────────────────────────────── */

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  --shadow-sm:  0 1px 4px rgba(14, 23, 42, 0.07);
  --shadow-md:  0 4px 16px rgba(14, 23, 42, 0.10);
  --shadow-lg:  0 8px 32px rgba(14, 23, 42, 0.13);

  /* ── TRANSITIONS ──────────────────────────────────────────── */

  --transition-fast: 140ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Z-INDEX ──────────────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     500;
  --z-modal:   1000;

  /* ── IMAGE CYCLE TIMING ───────────────────────────────────── */

  --hero-cycle-duration: 10s;
  --hero-cycle-fade:     1.4s;

}