/* ==========================================================================
   PACIFIC WAVE — DESIGN TOKENS
   Source: Pacific_Wave_Cleaning_BrandKit.docx v1.0
   ========================================================================== */

:root {
  /* Colour */
  --color-brand: #29B5E8;       /* Pacific Blue — primary */
  --color-brand-hover: #1A96C4; /* Arctic Teal */
  --color-ocean: #0B1E3D;       /* Deep Ocean — headlines, dark bg */
  --color-pearl: #F8FBFD;       /* page backgrounds */
  --color-mist: #DDE8EE;        /* borders / dividers */
  --color-slate: #4A5568;       /* body text */
  --color-charcoal: #1A202C;    /* primary text */
  --color-gold: #C9A84C;        /* premium accent, <=5% surface */
  --color-blue-tint: #E3F5FC;   /* light section bg / blob fill */
  --color-white: #FFFFFF;
  --color-surface: var(--color-white); /* card/panel surface — swaps in dark mode */

  /* Glassmorphism & Premium UI Elements */
  --glass-bg-light: rgba(248, 251, 253, 0.72);
  --glass-bg-dark: rgba(11, 30, 61, 0.72);
  --glass-border-light: rgba(221, 232, 238, 0.35);
  --glass-border-dark: rgba(255, 255, 255, 0.08);
  --glass-blur: 16px;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
  --grad-ocean: linear-gradient(135deg, var(--color-ocean) 0%, #132a4e 100%);
  --grad-gold: linear-gradient(135deg, var(--color-gold) 0%, #A28235 100%);
  --grad-ambient: radial-gradient(circle, rgba(41, 181, 232, 0.12) 0%, rgba(26, 150, 196, 0) 70%);

  /* Typography */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  --fs-hero: clamp(2.75rem, 6vw, 5.5rem);     /* 72–88px */
  --fs-h1: clamp(2.25rem, 4vw, 3.5rem);        /* 48–56px */
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);        /* 36–40px */
  --fs-h3: clamp(1.3rem, 2vw, 1.75rem);        /* 24–28px */
  --fs-body-lg: clamp(1.05rem, 1.3vw, 1.25rem);/* 18–20px */
  --fs-body: 1rem;                             /* 16px */
  --fs-caption: 0.85rem;                       /* 12–14px */

  /* Spacing / layout */
  --container-max: 1280px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  --section-pad-desktop: 96px;
  --section-pad-mobile: 56px;

  /* Radius */
  --radius-btn: 6px;
  --radius-card: 16px;
  --radius-input: 8px;
  --radius-pill: 999px;

  /* Shadows (tinted toward Deep Ocean per brand kit) */
  --shadow-card: 0 4px 20px rgba(11, 30, 61, 0.04);
  --shadow-elevated: 0 16px 48px rgba(11, 30, 61, 0.12);
  --shadow-soft: 0 8px 30px rgba(11, 30, 61, 0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-slow: 0.6s;

  /* Nav */
  --nav-h-desktop: 72px;
  --nav-h-mobile: 64px;
}

@media (max-width: 768px) {
  :root {
    --section-pad: var(--section-pad-mobile);
  }
}

/* ---------- Dark theme override ---------- */
[data-theme="dark"] {
  --color-pearl: #0A1322;
  --color-surface: #121E32;
  --color-charcoal: #EAF2F8;
  --color-slate: #A6B6C8;
  --color-mist: #233247;
  --color-blue-tint: #0F1D30;
  --glass-bg-light: rgba(18, 30, 50, 0.72);
  --glass-border-light: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}