/* ==========================================================================
   i4-Marine Technologies - Design Tokens (LIGHT THEME)
   Palette sampled pixel-by-pixel from the official brand mark.
   Every text/background pair below was computed and verified >= WCAG AA.
   ========================================================================== */

:root {
  /* ---- Brand core (sampled from logo) ---------------------------------- */
  --marine-blue:      #05539C;  /* dominant logo blue - 7.71:1 on white      */
  --marine-blue-lift: #0A6CC4;  /* hover fill for primary                    */
  --marine-deep:      #04407A;  /* pressed fill                              */
  --aqua-mint:        #45E6B6;  /* logo wave green - FILL ONLY, see note     */
  --aqua-ink:         #0F7052;  /* green accent for TEXT on light - 6.07:1   */
  --aqua-dim:         #1FA57E;  /* decorative borders / rules only           */
  --sky-link:         #4DA3E8;  /* lifted blue for text on the dark bands    */

  /* NOTE: --aqua-mint is 1.59:1 on white and MUST NOT be used for text or
     icons on any light surface. It is valid as a button FILL with --text-ink
     on top (10.53:1), and as text on the deep bands (9.95:1 on --ink-deep). */

  /* ---- Surfaces --------------------------------------------------------- */
  --page:        #FFFFFF;  /* default page background                        */
  --surface-1:   #F2F7FC;  /* alternating band                               */
  --surface-2:   #E6EFF8;  /* deeper band                                    */
  --card:        #FFFFFF;  /* card fill                                      */
  --ink-deep:    #042440;  /* deliberate dark accent band (CTA, footer)      */
  --ink-deeper:  #02121F;  /* deepest, for gradients on the dark bands       */

  /* ---- Text on light ---------------------------------------------------- */
  --text-ink:      #0B1F33;  /* 16.69:1 on white - headings                  */
  --text-body:     #2C4155;  /* 10.53:1 on white - body copy                 */
  --text-mute:     #4E6779;  /* 5.93 white / 5.50 surface-1 / 5.10 surface-2 */

  /* ---- Text on the dark accent bands ------------------------------------ */
  --text-on-deep:      #FFFFFF;  /* 15.77:1 on --ink-deep                    */
  --text-on-deep-body: #C7D8E7;  /* body copy on --ink-deep                  */
  --text-on-deep-mute: #A9C0D4;  /* 8.39:1 on --ink-deep                     */

  /* ---- Accents ---------------------------------------------------------- */
  --signal-amber: #B27C00;   /* hull yellow, darkened to read on light        */
  --star-gold:    #E8A100;   /* Google review stars                           */
  --danger:       #C62828;

  /* ---- Glass -----------------------------------------------------------
     On a light ground, low-opacity glass is invisible. These are deliberately
     high-opacity so cards read as surfaces rather than as haze.              */
  --glass-fill:   rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.93);
  --glass-deep:   rgba(4, 36, 64, 0.72);   /* glass sitting on a dark band   */
  --glass-edge:   rgba(5, 83, 156, 0.22);
  --hairline:     rgba(11, 31, 51, 0.12);  /* visible on light, not white/10 */
  --hairline-deep:rgba(255, 255, 255, 0.16);

  /* ---- Multi-layer shadows (blue-tinted, never a flat grey drop) -------- */
  --shadow-sm: 0 1px 2px rgba(5,83,156,.07), 0 2px 6px rgba(5,83,156,.06);
  --shadow-md: 0 1px 2px rgba(5,83,156,.06), 0 8px 20px rgba(5,83,156,.10),
               0 24px 50px rgba(5,83,156,.10);
  --shadow-lg: 0 2px 4px rgba(5,83,156,.08), 0 16px 34px rgba(5,83,156,.12),
               0 40px 80px rgba(5,83,156,.14);
  --glow-aqua: 0 0 0 1px rgba(5,83,156,.16), 0 8px 26px rgba(5,83,156,.18);

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --fs-hero:  clamp(2.6rem, 6.5vw, 5.5rem);
  --fs-h1:    clamp(2.2rem, 4.8vw, 3.9rem);
  --fs-h2:    clamp(1.85rem, 3.4vw, 2.9rem);
  --fs-h3:    clamp(1.3rem, 2vw, 1.65rem);
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:  1rem;
  --fs-sm:    0.9rem;
  --fs-label: 0.76rem;

  /* ---- Spacing ---------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;
  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter:    clamp(1.15rem, 4vw, 3rem);
  --maxw:      1280px;
  --maxw-text: 68ch;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-buoy: cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.33, 1, .68, 1);
  --t-micro:   200ms;
  --t-hover:   240ms;
  --t-enter:   640ms;

  /* ---- Z-index scale ---------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   10;
  --z-header:   20;
  --z-dropdown: 300;
  --z-overlay:  900;
  --z-modal:    999;
  --z-toast:    9999;

  /* ---- Layout metrics --------------------------------------------------- */
  --topbar-h:   38px;
  --header-h:   84px;
  --header-h-sm:64px;
  --mobilebar-h:68px;
}

/* Header metrics collapse once the page is scrolled. */
:root:has(.site-header.is-stuck) {
  --header-h: var(--header-h-sm);
}