/* ==========================================================================
   VERTEX — DESIGN TOKENS
   --------------------------------------------------------------------------
   Every colour, font size, space and radius used anywhere on the site is
   defined here and nowhere else. Change the brand in this one file and the
   whole site follows. Spec §2 "Brand & Design System".
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     COLOUR — Corporate Trust Blue (spec §2.1)
     ------------------------------------------------------------------------ */
  --c-lightest: #E8F0F6;  /* page & section backgrounds          */
  --c-light:    #9FC4DE;  /* soft fills, borders, subtle accents */
  --c-mid:      #4A90C2;  /* gradient top, highlights, icons     */
  --c-main:     #14507E;  /* buttons, links, headings, logo      */
  --c-darkest:  #0A3252;  /* dark bands, footer, body headings   */

  /* Neutrals — a slate scale tinted very slightly blue so greys sit
     comfortably beside the brand blues instead of looking dirty. */
  --c-white:      #FFFFFF;
  --c-off-white:  #F7FAFC;
  --c-slate-100:  #EDF2F6;
  --c-slate-200:  #DCE5EC;
  --c-slate-300:  #C3D0DA;
  --c-slate-500:  #6B7F8F;
  --c-slate-700:  #3D4E5C;
  --c-slate-900:  #1E2A33;

  /* Semantic roles — templates reference these, not raw palette names, so
     intent stays readable ("border colour") rather than literal ("light blue"). */
  --c-text:            var(--c-slate-700);
  --c-text-strong:     var(--c-darkest);
  --c-text-muted:      var(--c-slate-500);
  --c-text-on-dark:    #E9F1F8;
  --c-heading:         var(--c-darkest);
  --c-link:            var(--c-main);
  --c-link-hover:      var(--c-darkest);
  --c-border:          var(--c-slate-200);
  --c-border-strong:   var(--c-slate-300);
  --c-surface:         var(--c-white);
  --c-surface-alt:     var(--c-lightest);

  /* Feedback states */
  --c-success:     #1B7F5A;
  --c-success-bg:  #E6F5EF;
  --c-error:       #B3261E;
  --c-error-bg:    #FDECEA;
  --c-warning:     #8A5A00;
  --c-warning-bg:  #FFF6E5;

  /* ------------------------------------------------------------------------
     GRADIENTS (spec §2.1 — Mid → Main, angled ~160°)
     ------------------------------------------------------------------------ */
  --gradient-primary: linear-gradient(160deg, var(--c-mid) 0%, var(--c-main) 100%);
  --gradient-deep:    linear-gradient(160deg, var(--c-main) 0%, var(--c-darkest) 100%);
  --gradient-soft:    linear-gradient(160deg, #F4F9FC 0%, var(--c-lightest) 100%);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY (spec §2.2 — Lato throughout)
     ------------------------------------------------------------------------
     Lato ships 300/400/700/900. There is no true SemiBold, so the spec's
     "H3 SemiBold" maps to 700 — the closest weight the family provides. */
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-bold:     700;
  --fw-black:    900;

  /* Fluid type: each size interpolates between mobile and desktop across the
     viewport, so there are no jarring jumps at breakpoints. */
  --fs-xs:   0.8125rem;                              /* 13px — captions, meta   */
  --fs-sm:   0.875rem;                               /* 14px — small print      */
  --fs-base: 1rem;                                   /* 16px — body            */
  --fs-md:   clamp(1.0625rem, 0.35vw + 1rem, 1.125rem);   /* lead paragraphs   */
  --fs-lg:   clamp(1.25rem,  0.6vw  + 1.1rem, 1.5rem);    /* H3                */
  --fs-xl:   clamp(1.5rem,   1.2vw  + 1.2rem, 2rem);      /* H2 small          */
  --fs-2xl:  clamp(1.875rem, 1.8vw  + 1.3rem, 2.5rem);    /* H2                */
  --fs-3xl:  clamp(2.25rem,  3vw    + 1.4rem, 3.5rem);    /* H1 / hero         */

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-snug:    1.45;
  --lh-body:    1.7;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-eyebrow: 0.14em;   /* uppercase eyebrow labels, spec §2.2 */

  /* ------------------------------------------------------------------------
     SPACING — a 4px-based scale; generous vertical rhythm per spec §2.4
     ------------------------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Section padding scales with the viewport — tight on phones, airy on desktop. */
  --section-y:       clamp(3.5rem, 6vw, 6rem);
  --section-y-tight: clamp(2.5rem, 4vw, 4rem);

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */
  --container-max:  1200px;
  --container-narrow: 780px;   /* long-form reading width (legal, articles) */
  --container-pad:  clamp(1.25rem, 4vw, 2.5rem);
  --header-height:  76px;

  /* ------------------------------------------------------------------------
     BORDERS, RADIUS & SHADOW (spec §2.3 — rounded corners, soft blue shadow)
     ------------------------------------------------------------------------ */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10, 50, 82, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 50, 82, 0.06);
  --shadow:    0 6px 20px rgba(10, 50, 82, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 50, 82, 0.14);

  /* Focus ring — deliberately high-contrast and never removed (spec §9.4). */
  --focus-ring: 0 0 0 3px rgba(74, 144, 194, 0.45);

  /* ------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------ */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --transition:  180ms var(--ease);
  --transition-slow: 320ms var(--ease);

  /* ------------------------------------------------------------------------
     Z-INDEX — named so stacking order is decided here, not guessed inline
     ------------------------------------------------------------------------ */
  --z-dropdown: 100;
  --z-header:   200;
  --z-overlay:  300;
  --z-cookie:   400;
}

/* Respect the OS "reduce motion" setting — no parallax, no auto-rotation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
    --transition-slow: 0ms;
  }
}