/* ============================================================
   Blue Horizon Docks and Decks — Design Tokens
   Single source of truth for color, type, spacing, layout.
   Every value in styles.css resolves from a token here.
   Palette: neutrals primary (black / white / gray) with blue accents.
   ============================================================ */

:root {
  /* Color — neutrals (primary surfaces) */
  --black:          #000000;
  --ink:            #141414;   /* primary dark surface */
  --ink-deep:       #050505;   /* deepest black (footer bottom) */
  --charcoal:       #1F1F1F;
  --gray-900:       #2A2A2A;
  --gray-700:       #4A4A4A;
  --gray-500:       #767676;
  --gray-300:       #B5B5B5;
  --gray-200:       #DCDCDC;
  --gray-100:       #ECECEE;
  --gray-50:        #F6F6F7;
  --white:          #FFFFFF;

  /* Aliases — keep existing styles.css references working.
     "navy" and "wood" are now neutral; blue is reserved for accent use only. */
  --navy:           #141414;   /* was navy — now charcoal/ink */
  --navy-deep:      #050505;   /* was deeper navy — now near-black */
  --wood:           #141414;   /* was cedar — now ink (primary CTA) */
  --wood-deep:      #000000;   /* was deeper cedar — now black (hover) */
  --wood-soft:      #B5B5B5;   /* was warm tan — now light gray */

  /* Color — blue accents (used sparingly: dividers, eyebrows, icons, focus) */
  --lake:           #1E5A8C;
  --lake-deep:      #154770;
  --sky:            #5BA3D9;
  --sky-soft:       #E2ECF5;
  --blue-accent:    #0E2A47;   /* deep navy retained for occasional accent */

  /* Color — text */
  --text-dark:      #0F0F12;
  --text-body:      #2C2C30;
  --slate:          #5A5A62;
  --slate-soft:     #9A9AA2;
  --bg-light:       #F4F4F6;
  --bg-lighter:     #FAFAFB;
  --border:         #E2E2E5;
  --border-soft:    #ECECEF;

  /* Color — utility */
  --success:        #2E7D5B;
  --warning:        #C77A1F;

  /* White with opacity */
  --white-95:       rgba(255,255,255,0.95);
  --white-85:       rgba(255,255,255,0.85);
  --white-70:       rgba(255,255,255,0.70);
  --white-50:       rgba(255,255,255,0.50);
  --white-30:       rgba(255,255,255,0.30);
  --white-15:       rgba(255,255,255,0.15);
  --white-10:       rgba(255,255,255,0.10);

  /* Ink with opacity (hero overlays, shadows) */
  --navy-overlay:   rgba(10,10,10,0.94);
  --navy-85:        rgba(10,10,10,0.85);
  --navy-70:        rgba(10,10,10,0.70);
  --navy-55:        rgba(10,10,10,0.55);
  --navy-30:        rgba(10,10,10,0.30);
  --navy-shadow-12: rgba(0,0,0,0.12);
  --navy-shadow-08: rgba(0,0,0,0.08);
  --navy-shadow-04: rgba(0,0,0,0.04);

  /* Lake with opacity (blue accent) */
  --lake-tint-10:   rgba(30,90,140,0.10);
  --lake-tint-20:   rgba(30,90,140,0.20);

  /* Typography */
  --font-head:      'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:      'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --fs-hero:        clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-h1:          clamp(2rem, 4vw, 3.25rem);
  --fs-h2:          clamp(1.6rem, 3vw, 2.5rem);
  --fs-h3:          1.35rem;
  --fs-h4:          1.125rem;
  --fs-lg:          1.125rem;
  --fs-base:        1rem;
  --fs-sm:          0.9375rem;
  --fs-xs:          0.8125rem;

  --lh-tight:       1.15;
  --lh-snug:        1.35;
  --lh-base:        1.6;

  --fw-reg:         400;
  --fw-med:         500;
  --fw-semi:        600;
  --fw-bold:        700;

  /* Layout */
  --max-w:          1440px;
  --max-w-narrow:   980px;
  --max-w-wide:     1600px;
  --max-w-prose:    640px;

  /* Radii */
  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           14px;
  --r-pill:         999px;

  /* Borders */
  --bw-1:           1px;
  --bw-2:           2px;

  /* Shadows */
  --shadow-sm:      0 1px 2px var(--navy-shadow-04);
  --shadow-md:      0 6px 18px var(--navy-shadow-08);
  --shadow-lg:      0 16px 40px var(--navy-shadow-12);

  /* Motion */
  --transition:     0.25s ease;
  --transition-slow: 0.4s ease;

  /* Spacing — 4pt base grid */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
  --space-20:       80px;
  --space-24:       96px;
  --space-32:       128px;
}