/* ==========================================================================
   Soft Oceans — Design Tokens
   Drop this file in first. Every page imports it. All values are CSS custom
   properties so the whole site can be re-themed from one place.
   Brand colors extracted from the live logo: #1B98FC (ocean blue) + #1E266D (navy).
   ========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --c-primary:        #1B98FC;   /* ocean blue — links, buttons, accents */
  --c-primary-600:    #1380e0;   /* hover/darker */
  --c-primary-050:    #eaf4ff;   /* tint — chips, icon backgrounds */
  --c-navy:           #1E266D;   /* deep navy — headings, dark sections */
  --c-navy-700:       #161c54;   /* darker navy for gradients */

  /* ---- Neutrals ---- */
  --c-ink:            #1c2733;   /* body text */
  --c-grey:           #5a6b7b;   /* secondary text */
  --c-grey-300:       #9aa7b5;   /* muted / captions */
  --c-line:           #e3e9f0;   /* borders, dividers */
  --c-soft:           #f5f8fc;   /* alternating section background */
  --c-white:          #ffffff;

  /* ---- Functional ---- */
  --c-success:        #1aa86b;
  --c-warning:        #e0a512;
  --c-error:          #d64550;   /* form validation errors */

  /* ---- Review additions (plan-design-review 2026-07-02, PLAN.md D-12/D-13) ---- */
  --c-link:           #0b6ec5;   /* interactive blue, 4.5:1+ on white — links, small
                                    interactive text, primary-button background */
  --c-on-dark:        #dce8f4;   /* body text on navy sections */
  --c-on-dark-accent: #9ecbf3;   /* eyebrows/links on navy */
  --c-on-dark-muted:  #cdd3ec;   /* footer link text */
  --c-line-hover:     #cfe0f3;   /* card hover border, chip border */

  /* ---- Typography ---- */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Live site uses a geometric sans (Poppins-like). Load Poppins from Google Fonts,
     or self-host. Weights used: 400, 500, 600, 700. */

  --fs-hero:    clamp(34px, 5vw, 56px);
  --fs-h1:      clamp(30px, 4vw, 44px);
  --fs-h2:      clamp(26px, 3.4vw, 38px);
  --fs-h3:      20px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 13px;

  --lh-tight:   1.25;
  --lh-body:    1.65;

  /* ---- Spacing scale (8px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 84px; --s-10: 120px;

  /* ---- Layout ---- */
  --maxw: 1140px;          /* content container */
  --gutter: 24px;
  --section-y: 84px;       /* vertical rhythm per section (60px on mobile) */

  /* ---- Radius / shadow ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(30, 38, 109, .06);
  --shadow:    0 8px 30px rgba(30, 38, 109, .08);
  --shadow-lg: 0 16px 44px rgba(30, 38, 109, .12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  .22s;
}

/* ==========================================================================
   Minimal reset / base — keep or fold into your own base.css
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-600); }
h1, h2, h3, h4 { color: var(--c-navy); line-height: var(--lh-tight); margin: 0; }
p { margin: 0 0 var(--s-4); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; border-bottom: 1px solid var(--c-line); }
.section--soft { background: var(--c-soft); }
.section--dark { background: linear-gradient(160deg, var(--c-navy-700), var(--c-navy) 55%, var(--c-primary)); color: #fff; border-bottom: none; }

@media (max-width: 600px) {
  :root { --section-y: 60px; }
}