/* ===================================================================
   VARIABLES
   Design tokens for the Seawind sailing school site.
   Palette is drawn from Lake Neuchâtel: deep water navy, sail canvas,
   lake teal and brass hardware (cleats, portholes).
   Change values here to re-theme the whole site.
   =================================================================== */

:root {
  /* ---- Color: core palette ---- */
  --color-navy: #0b3142;        /* deep lake water at dusk */
  --color-navy-light: #133a4d;
  --color-teal: #1d6d77;        /* mid-lake teal, primary brand color */
  --color-teal-light: #4c9aa3;
  --color-teal-pale: #dfeef0;   /* pale wash for alternate section backgrounds */
  --color-canvas: #f6f3ea;      /* sail canvas, main page background */
  --color-foam: #ffffff;
  --color-brass: #c9973f;       /* brass hardware accent */
  --color-brass-dark: #a97b2e;
  --color-ink: #16242b;         /* near-navy body text */
  --color-ink-soft: #4c5c63;
  --color-border: #d9d3c2;

  /* ---- Color: semantic aliases (use these in components) ---- */
  --color-bg: var(--color-canvas);
  --color-bg-alt: var(--color-teal-pale);
  --color-bg-dark: var(--color-navy);
  --color-text: var(--color-ink);
  --color-text-soft: var(--color-ink-soft);
  --color-text-on-dark: var(--color-canvas);
  --color-primary: var(--color-teal);
  --color-primary-dark: var(--color-navy-light);
  --color-accent: var(--color-brass);
  --color-accent-dark: var(--color-brass-dark);
  --color-border-default: var(--color-border);

  /* ---- Typography ---- */
  --font-display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-xl: clamp(1.4rem, 1.25rem + 0.75vw, 1.85rem);
  --fs-2xl: clamp(1.85rem, 1.55rem + 1.5vw, 2.75rem);
  --fs-3xl: clamp(2.4rem, 1.9rem + 2.5vw, 4rem);

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

  --ls-eyebrow: 0.14em;

  /* ---- Spacing scale (base unit 8px) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4.5rem;   /* 72px */
  --space-7: 6.5rem;   /* 104px */

  /* ---- Layout ---- */
  --container-width: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (tinted with navy instead of flat black) ---- */
  --shadow-sm: 0 2px 10px rgba(11, 49, 66, 0.08);
  --shadow-md: 0 10px 30px rgba(11, 49, 66, 0.14);
  --shadow-lg: 0 24px 60px rgba(11, 49, 66, 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.35s var(--ease-out);
  --transition-slow: 0.8s var(--ease-out);

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-overlay: 200;

  /* ---- Breakpoints (for reference in comments — CSS vars can't be used in @media) ---- */
  /* sm: 600px   md: 900px   lg: 1200px */
}