/* ==========================================================================
   Dock-Ready LLC — Design tokens
   Single source of truth for colour, type, spacing, radius and shadow.
   Change a value here and it propagates across the whole site.
   ========================================================================== */

:root {
  /* --- Brand colour ------------------------------------------------------ */
  --navy:            #022956;   /* primary / headings / dark sections        */
  --navy-700:        #0a3f74;   /* gradient partner for --navy              */
  --teal:            #0095ab;   /* accent / CTA                              */
  --teal-600:        #007b8d;   /* accent hover                              */
  --steel:           #7BA6B8;   /* muted brand blue-grey                     */

  /* Unified 2026-08-04: the accent is the client's own logo teal, taken from
     assets/logo/*.svg, replacing the #24A3B5 the design mockup had drifted to.
     Site and logo now match exactly — don't reintroduce a second teal. */

  /* --- Surfaces ---------------------------------------------------------- */
  --bg:              #fdfeff;   /* page background                           */
  --surface:         #ffffff;   /* cards                                     */
  --tint-top:        #f2f7f9;   /* tinted section gradient (start)           */
  --tint-bottom:     #e9f2f5;   /* tinted section gradient (end)             */

  /* --- Text -------------------------------------------------------------- */
  --text:            #022956;
  --text-muted:      #5b7285;
  --text-on-dark:    rgba(255, 255, 255, 0.88);
  --text-on-dark-dim:rgba(255, 255, 255, 0.70);

  /* --- Lines ------------------------------------------------------------- */
  --border:          rgba(123, 166, 184, 0.30);
  --border-strong:   rgba(123, 166, 184, 0.45);
  --border-on-dark:  rgba(255, 255, 255, 0.14);

  /* --- Typography -------------------------------------------------------- */
  --font-display:    'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:       'Manrope', 'Segoe UI', system-ui, sans-serif;

  --fs-h1:           clamp(2.5rem, 5.4vw, 4.25rem);   /*  40 → 68px */
  --fs-h2:           clamp(1.875rem, 3.6vw, 2.75rem); /*  30 → 44px */
  --fs-h3:           1.375rem;                        /*  22px      */
  --fs-lead:         clamp(1.0625rem, 1.5vw, 1.25rem);/*  17 → 20px */
  --fs-body:         1rem;                            /*  16px      */
  --fs-sm:           0.9375rem;                       /*  15px      */
  --fs-xs:           0.8125rem;                       /*  13px      */

  --lh-tight:        1.06;
  --lh-heading:      1.2;
  --lh-body:         1.65;

  /* --- Layout ------------------------------------------------------------ */
  --container:       1200px;
  --container-narrow: 860px;
  --gutter:          48px;
  --gutter-md:       32px;
  --gutter-sm:       20px;

  --section-y:       90px;
  --section-y-lg:    110px;
  --section-y-sm:    64px;

  /* --- Radius ------------------------------------------------------------ */
  --r-sm:            12px;
  --r-md:            18px;
  --r-lg:            24px;
  --r-xl:            28px;
  --r-pill:          999px;

  /* --- Shadow ------------------------------------------------------------ */
  --shadow-card:     0 8px 26px rgba(2, 41, 86, 0.06);
  --shadow-card-hi:  0 20px 46px rgba(2, 41, 86, 0.13);
  --shadow-teal:     0 10px 30px rgba(0, 149, 171, 0.35);
  --shadow-teal-hi:  0 16px 38px rgba(0, 149, 171, 0.55);
  --shadow-deep:     0 24px 60px rgba(2, 41, 86, 0.25);
  --shadow-nav:      0 4px 24px rgba(2, 41, 86, 0.06);

  /* --- Motion ------------------------------------------------------------ */
  --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:          0.2s var(--ease);
  --t-med:           0.25s var(--ease);
  --t-slow:          0.35s var(--ease);

  /* --- Z-index ----------------------------------------------------------- */
  --z-nav:           100;
  --z-overlay:       50;
}

@media (max-width: 1024px) {
  :root {
    --gutter:     var(--gutter-md);
    --section-y:  72px;
    --section-y-lg: 84px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter:       var(--gutter-sm);
    --section-y:    var(--section-y-sm);
    --section-y-lg: 72px;
  }
}