/* ==========================================================================
   Sailing Hobo — Design Tokens
   All colours, type, spacing and component defaults live here as CSS
   variables. Edit values here rather than inventing new ones in templates.
   ========================================================================== */

:root {
  /* ---- Colour palette (Section 07 of the brand spec) ---- */
  --sh-color-navy-deep:   #0a1a2f;   /* deep ocean navy — header, footer, dark sections */
  --sh-color-navy:        #10263f;  /* ocean blue-navy */
  --sh-color-ocean-blue:  #1c4b73;
  --sh-color-cream:       #f7f3ea;  /* warm cream / off-white */
  --sh-color-sand:        #e4d9c3;
  --sh-color-gold:        #d9a441;  /* sunset gold — primary accent / CTAs */
  --sh-color-gold-dark:   #b9852c;
  --sh-color-charcoal:    #23262b;
  --sh-color-white:       #ffffff;

  /* Semantic aliases so templates never reference raw colours directly */
  --sh-bg-body:           var(--sh-color-cream);
  --sh-bg-dark:           var(--sh-color-navy-deep);
  --sh-text-body:         var(--sh-color-charcoal);
  --sh-text-on-dark:      var(--sh-color-cream);
  --sh-accent:            var(--sh-color-gold);
  --sh-accent-hover:      var(--sh-color-gold-dark);

  /* ---- Typography ----
     No external font loading (performance requirement). System font
     stacks only for now. A locally-hosted display/serif font can be
     dropped into assets/fonts/ later and swapped in here without
     touching any template — that's the intended upgrade path. */
  --sh-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --sh-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif; /* heavy weight + tracking below stands in for a condensed display face */
  --sh-font-serif: Georgia, "Times New Roman", Times, serif; /* logo wordmark */

  --sh-fw-regular: 400;
  --sh-fw-semibold: 600;
  --sh-fw-bold: 700;
  --sh-fw-black: 900;

  /* Fluid type scale */
  --sh-text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --sh-text-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --sh-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --sh-text-lg:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --sh-text-xl:   clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --sh-text-2xl:  clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  --sh-text-hero: clamp(2.75rem, 2rem + 3.2vw, 5.5rem);

  /* ---- Spacing scale ---- */
  --sh-space-2xs: 0.4rem;
  --sh-space-xs:  0.75rem;
  --sh-space-sm:  1.25rem;
  --sh-space-md:  2rem;
  --sh-space-lg:  3.5rem;
  --sh-space-xl:  5.5rem;
  --sh-space-2xl: 8rem;

  /* ---- Layout ---- */
  --sh-content-width: 1280px;
  --sh-content-width-narrow: 900px;
  --sh-radius-sm: 4px;
  --sh-radius-md: 8px;
  --sh-border-color: rgba(10, 26, 47, 0.12);
  --sh-border-color-on-dark: rgba(247, 243, 234, 0.2);
  --sh-shadow-card: 0 8px 24px rgba(10, 26, 47, 0.12);
  --sh-shadow-header: 0 2px 16px rgba(0, 0, 0, 0.15);

  /* ---- Breakpoints (for reference in comments — CSS vars can't drive
     @media queries directly, keep these numbers in sync with main.css) ---- */
  --sh-bp-mobile: 480px;
  --sh-bp-tablet: 768px;
  --sh-bp-desktop: 1100px;
}