/* Katama Bay design system — tokens ("Sound" palette, Oct 2026). Generated from tokens.json; do not edit by hand.
   Source of truth: the "Katama Bay" design system on claude.ai. */

:root {
  /* colour */
  --field: #dce3e7;
  --ground: #ffffff;
  --sheet: #eaf4f9;
  --hero-fill: #e3eef4;
  --ink: #0b2545;
  --ink-2: #4d5a63;
  --rule: #cbd6dd;
  --border: #6b7a84;
  --hair: #e3eaee;
  --accent: #69be28;
  --accent-ink: #3e7d1c;
  --sky: #8fc8e8;
  --wolf: #a5acaf;
  --danger: #b42318;
  --deep: #0b2545;
  --on-deep: #d6e4ec;
  --rule-on-deep: #23395a;
  --chart-line: rgba(214,228,236,0.10);
  /* spacing */
  --space-chip: 0.5rem;
  --space-tier: 1.1rem;
  --space-actions: 2.25rem;
  --space-col: 2.5rem;
  --space-head: 2.75rem;
  --space-col-x: 3.5rem;
  /* radius */
  --r: 16px;
  --r-sm: 10px;
  --r-pill: 999px;
  /* shadow */
  --shadow: 0 1px 2px rgba(13,18,20,.04), 0 10px 28px -14px rgba(13,18,20,.16);
  /* layout */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --sec-pad: clamp(3.25rem, 7vw, 5.75rem);
  --measure: 64ch;
  --wrap-max: 78rem;
  --sheet-max: 94rem;
  /* type families */
  --font-grot: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
}

/* Type styles: the largest size of each fluid style. components.css sets the fluid clamps and font-stretch. */
.t-wordmark { font-family: var(--font-grot); font-size: 1.18rem; line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; }
.t-h1 { font-family: var(--font-grot); font-size: 5rem; line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; }
.t-hero-h1 { font-family: var(--font-grot); font-size: 4.4rem; line-height: 1.02; font-weight: 800; letter-spacing: -0.034em; }
.t-h2 { font-family: var(--font-grot); font-size: 2.55rem; line-height: 1.02; font-weight: 800; letter-spacing: -0.018em; }
.t-price { font-family: var(--font-grot); font-size: 1.85rem; line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; }
.t-h3 { font-family: var(--font-grot); font-size: 1.22rem; line-height: 1.02; font-weight: 700; letter-spacing: -0.01em; }
.t-button { font-family: var(--font-grot); font-size: 1rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.t-nav { font-family: var(--font-grot); font-size: 0.93rem; line-height: 1.4; font-weight: 500; }
.t-label { font-family: var(--font-grot); font-size: 0.86rem; line-height: 1.4; font-weight: 700; }
.t-eyebrow { font-family: var(--font-grot); font-size: 0.8125rem; line-height: 1.3; font-weight: 700; letter-spacing: 0.16em; }
.t-lede { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.48; font-weight: 400; }
.t-body { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.62; font-weight: 400; }
.t-note { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.62; font-weight: 400; }