/* GENERATED from brand/tokens.json by .claude/skills/page-design/scripts/build_tokens_css.py. Do not edit by hand. */
@import url("https://fonts.googleapis.com/css2?family=Shrikhand&family=Work+Sans:wght@400;500;700&display=swap");
:root {
  --deep-water: #13263b;
  --ink-muted: #3f5266;
  --lake-blue: #1f4e79;
  --lake-blue-hover: #173d60;
  --hill-sky: #7fb3d5;
  --sky-tint: #dce9f4;
  --cream: #f4eedf;
  --white: #ffffff;
  --limestone: #f2e3c6;
  --limestone-line: #e6dcc6;
  --duck-yellow: #f7c948;
  --sun-gold: #e9a93b;
  --buoy-red: #c0452a;
  --buoy-red-tint: #f7ddd5;
  --buoy-red-text: #9e3521;
  --pebble: #d8dce1;
  --pebble-text: #4f5a66;
  --field-border: #7f91a5;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-panel: 20px;
  --radius-message: 14px;
  --radius-field: 12px;
  --shadow-float: 0 12px 32px rgba(19,38,59,0.12);
  --content-max: 1200px;
  --gutter-desktop: 24px;
  --margin-desktop: 80px;
  --gutter-phone: 16px;
  --margin-phone: 20px;
  --breakpoint-phone: 640px;
  --tap-min: 44px;
  --font-heading: "Shrikhand", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
}
.t-display { margin: 0; font-family: var(--font-heading); font-size: 76px; line-height: 1.05; font-weight: 400; }
.t-h1 { margin: 0; font-family: var(--font-heading); font-size: 56px; line-height: 1.1; font-weight: 400; }
.t-h2 { margin: 0; font-family: var(--font-heading); font-size: 44px; line-height: 1.12; font-weight: 400; }
.t-h3 { margin: 0; font-family: var(--font-heading); font-size: 28px; line-height: 1.2; font-weight: 400; }
.t-h4 { margin: 0; font-family: var(--font-body); font-size: 20px; line-height: 1.3; font-weight: 700; }
.t-eyebrow { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.t-body-lg { margin: 0; font-family: var(--font-body); font-size: 20px; line-height: 1.6; font-weight: 400; }
.t-body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400; }
.t-small { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
.t-button-lg { margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 1.2; font-weight: 700; }
.t-button { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.2; font-weight: 700; }
@media (max-width: 640px) {
  .t-display { font-size: 42px; line-height: 1.08; }
  .t-h1 { font-size: 36px; line-height: 1.12; }
  .t-h2 { font-size: 32px; line-height: 1.15; }
  .t-h3 { font-size: 24px; line-height: 1.2; }
  .t-h4 { font-size: 18px; }
  .t-eyebrow { font-size: 13px; }
  .t-body-lg { font-size: 18px; }
  .t-body { font-size: 16px; }
}