/* ==========================================================================
   Coastal Style — brand tokens and base styles
   Source of truth: the "Coastal Style" design system on claude.ai.
   If a value here disagrees with the design system, the design system wins.
   ========================================================================== */

/* Fonts
   - Playfair Display (display) loads from Google Fonts below.
   - Proxima Nova (sans) loads from the Coastal Style Adobe Fonts web project.
     Add its <link> in the page <head> (see CLAUDE.md). Montserrat is the
     stand-in when the Adobe kit isn't loaded. */
:root,
[data-theme="light"] {
  /* Brand palette — exact values, never change */
  --navy-ink: #0f2d3f;
  --tiffany-blue: #81d0c6;
  --sea-mist: #c7e6e1;
  --cloud-blue: #d7ebf3;
  --porcelain: #fafaf7;
  --sandstone: #d9d6ce;
  --driftwood: #b8aea0;
  --graphite: #2f3a40;

  /* Semantic colors — build with these */
  --surface: var(--porcelain);          /* page background */
  --surface-raised: #ffffff;            /* cards, menus */
  --surface-sand: var(--sandstone);     /* warm full-width band */
  --surface-mist: var(--sea-mist);      /* cool callout panel */
  --surface-deep: var(--navy-ink);      /* navy hero panel, footer */
  --ink: var(--navy-ink);               /* headlines */
  --ink-body: var(--graphite);          /* paragraphs */
  --ink-muted: #4f5b61;                 /* labels, captions, credits */
  --on-deep: var(--porcelain);          /* text on surface-deep */
  --accent: var(--tiffany-blue);        /* FILLS ONLY: buttons, icon discs, accent rule */
  --on-accent: var(--navy-ink);         /* text on an accent fill */
  --accent-text: #1f5e57;               /* Deep Tide: teal words on light grounds */
  --accent-on-deep: var(--tiffany-blue);/* teal words on navy */
  --line: var(--sandstone);             /* decorative hairlines */
  --focus-ring: var(--navy-ink);
  --link: var(--accent-text);
  --shadow-print: 0 18px 40px rgba(15, 45, 63, 0.22); /* magazine covers shown as objects ONLY */
}

[data-theme="dark"] {
  --surface: var(--navy-ink);
  --surface-raised: #16384d;
  --surface-sand: #16384d;
  --surface-mist: #1c4258;
  --surface-deep: #0a2130;
  --ink: var(--porcelain);
  --ink-body: var(--cloud-blue);
  --ink-muted: #a9bdc4;
  --accent-text: var(--tiffany-blue);
  --line: #2a4a5e;
  --focus-ring: var(--tiffany-blue);
  --shadow-print: 0 18px 40px rgba(0, 0, 0, 0.45);
}

:root {
  /* Type families */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: proxima-nova, "Proxima Nova", Montserrat, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Radius — the brand is square-cornered */
  --radius-none: 0; --radius-sm: 2px; --radius-full: 9999px;

  /* Sizes */
  --measure: 640px; --content-max: 1200px; --accent-rule-width: 48px;
}

/* Base */
html { background: var(--surface); }
body { margin: 0; background: var(--surface); color: var(--ink-body); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* Type styles */
.display-xl { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 68px; letter-spacing: -0.01em; color: var(--ink); }
.display-lg { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 50px; letter-spacing: -0.005em; color: var(--ink); }
.display-md { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 38px; color: var(--ink); }
.title      { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; color: var(--ink); }
.stat       { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 44px; color: var(--ink); }
.eyebrow    { font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.label      { font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.lead       { font-family: var(--font-sans); font-weight: 300; font-size: 19px; line-height: 30px; max-width: var(--measure); }
.body       { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 26px; }
.small      { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 20px; color: var(--ink-muted); }

@media (max-width: 720px) {
  .display-xl { font-size: 44px; line-height: 50px; }
  .display-lg { font-size: 32px; line-height: 38px; }
}

/* Components */
.cs-btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-6); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.cs-btn--primary { background: var(--accent); color: var(--on-accent); }
.cs-btn--primary:hover { background: var(--sea-mist); }
.cs-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.cs-btn--secondary:hover { background: var(--ink); color: var(--surface); }
.cs-btn--on-deep { background: transparent; color: var(--on-deep); border-color: var(--on-deep); }
.cs-btn--on-deep:hover { background: var(--on-deep); color: var(--navy-ink); }
.cs-btn__arrow { font-size: 14px; letter-spacing: 0; }

.cs-eyebrow { margin: 0; font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.cs-heading { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 50px; letter-spacing: -0.005em; color: var(--ink); }
.cs-heading em { font-style: normal; color: var(--accent-text); }
.cs-rule { display: block; width: var(--accent-rule-width); height: 2px; margin: var(--space-5) 0 0; background: var(--accent); border: 0; }
.cs-lead { margin: var(--space-5) 0 0; max-width: var(--measure); font-size: 19px; line-height: 30px; font-weight: 300; color: var(--ink-body); }

.cs-hero { background: var(--surface-deep); color: var(--on-deep); padding: var(--space-8) var(--space-7); }
.cs-hero .cs-eyebrow, .cs-hero .cs-lead { color: var(--on-deep); }
.cs-hero .cs-heading { color: var(--on-deep); font-size: 64px; line-height: 68px; letter-spacing: -0.01em; }
.cs-hero .cs-heading em { color: var(--accent-on-deep); }
.cs-hero__cta { margin-top: var(--space-6); }

.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-stat { padding: var(--space-6) var(--space-5); }
.cs-stat + .cs-stat { border-left: 1px solid var(--line); }
.cs-stat__figure { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 400; color: var(--ink); }
.cs-stat__label { margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }

.cs-offerings { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-sand); }
.cs-offering { padding: var(--space-6) var(--space-5); text-align: center; }
.cs-offering + .cs-offering { border-left: 1px solid var(--driftwood); }
.cs-offering__disc { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); }
.cs-offering__title { margin: var(--space-4) 0 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.cs-offering__list { margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 24px; color: var(--ink-body); }

@media (max-width: 720px) {
  .cs-stats, .cs-offerings { grid-template-columns: 1fr 1fr; }
  .cs-stat:nth-child(3), .cs-offering:nth-child(3) { border-left: 0; }
  .cs-hero { padding: var(--space-7) var(--space-4); }
  .cs-hero .cs-heading { font-size: 44px; line-height: 50px; }
  .cs-heading { font-size: 32px; line-height: 38px; }
}