/* Octave design tokens: the single source of truth for the homepage, the
   Clinic Twin and /design. The type, colour, sizes and controls follow
   Tandem Health's live system (tandemhealth.ai and its sign-up page, read
   28 October 2026); DESIGN.md lists each Tandem value beside ours. Tandem's
   own faces Inter and Fragment Mono are free and self-hosted here; its
   commercial faces are replaced by their closest free matches, Geist for
   Die Grotesk A and Newsreader for Martina Plantijn. Tandem's lime accent is
   not used. --font-sans and --font-accent are defined in fonts.css, and the
   site-wide frame (--frame-max, --frame-pad, --frame-gutter) in frame.css. */

@import url("/assets/css/fonts.css?v=20261030-2");
@import url("/assets/css/frame.css?v=20261030-1");

@font-face { font-family:"Inter"; src:url("/brand/fonts/Inter-Variable-latin.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/brand/fonts/Newsreader-Variable-latin.woff2") format("woff2"); font-weight:400 500; font-style:normal; font-display:swap; }
@font-face { font-family:"Fragment Mono"; src:url("/brand/fonts/FragmentMono-Regular-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

/* Declared on body.header-study too, so these win over theme.css on pages
   that load it. */
:root, body.header-study {
  /* Colour: light surfaces (Tandem's stone scale) */
  --bg:#fff;
  --bg-alt:#fafaf9;          /* stone-50: subtle alternation */
  --field:#f5f5f4;           /* stone-100: inputs and option fills */
  --ink:#000;                /* headings, labels, primary text */
  --muted:#57534f;           /* stone-600: body and helper text */
  --faint:#78716c;           /* stone-500: small print, placeholders */
  --hairline:#e7e5e4;        /* stone-200 */
  --hairline-strong:#d6d3d1; /* stone-300: hover on hairline controls */
  --focus:#155dfc;           /* the sign-up page's focus ring */
  --error:#b42318;           /* form errors only */

  /* Colour: brand and accent */
  --accent:#0d0d0d;          /* dark pills (Tandem's dark button); the text on them stays white */
  --accent-hover:#292524;
  --accent-ink:#fff;
  --brand:#101112;           /* the Octave wordmark */
  --brand-ink:#f0f2f4;

  /* Colour: dark film surfaces */
  --film:#000;
  --film-surface:#0b0d0f;
  --film-warm:#1a1410;
  --on-film:#fff;
  --on-film-soft:rgba(255,255,255,.82);
  --on-film-muted:rgba(255,255,255,.6);
  --on-film-faint:rgba(255,255,255,.38);
  --film-line:rgba(255,255,255,.3);
  --film-shade:rgba(0,0,0,.42);
  --glass:rgba(255,255,255,.12);
  --glass-strong:rgba(255,255,255,.18);
  --glass-edge:rgba(255,255,255,.28);
  --glass-light:rgba(255,255,255,.74);  /* frosted chips over light footage */
  /* One glass recipe, tuned over the hero film. Nav pills, the email pill and
     other glass controls all read these. */
  --glass-fill:rgba(226,236,244,.55);
  --glass-fill-fallback:rgba(226,236,244,.86);
  --glass-blur:blur(18px) saturate(1.45);
  --glass-line:rgba(214,228,240,.72);
  --glass-line-strong:rgba(236,246,252,.9);
  --glass-top:inset 0 1px 0 rgba(236,246,252,.9);
  --glass-drop:0 12px 32px rgba(0,0,0,.28);
  --glass-placeholder:rgba(255,255,255,.7);
  --glass-tint:var(--glass-fill);
  --glass-filter:var(--glass-blur);
  --glass-border:var(--glass-line);
  --glass-shadow:var(--glass-drop);
  --glass-edge-light:var(--glass-top),0 0 0 1px var(--glass-line),var(--glass-drop);
  --lamp:#ffd9a8;

  /* Colour: service palette (services-compact.css), for abstract avatars only */
  --blue:#154adb; --blue-pale:#7daaff; --blue-deep:#0b236d;
  --teal:#067a78; --teal-pale:#60cbbf; --teal-deep:#043e4d;
  --magenta:#ac236c; --magenta-pale:#ed86bf; --magenta-deep:#511747;
  --violet:#6240ba; --violet-pale:#b69ae8; --violet-deep:#2d206d;

  /* Type */
  --font-ui:"Inter","Helvetica Neue",Arial,sans-serif;               /* Tandem's app face */
  --font-serif:"Newsreader","Iowan Old Style",Georgia,serif;          /* for Martina Plantijn */
  --font-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-display:var(--font-sans);
  --font-text:var(--font-sans);

  --text-xs:12px;            /* mono caps labels, footnotes */
  --text-sm:14px;            /* buttons, labels, small print */
  --text-base:16px;          /* body, inputs */
  --text-md:16px;
  --text-lg:16px;            /* Tandem keeps leads at body size */
  --display-sm:30px;         /* quiz questions (Inter 600) */
  --display-md:38px;         /* feature headings */
  --display-lg:38px;         /* section headings */
  --display-hero:36px;       /* the hero headline */
  --list-serif:clamp(19px,1.6vw,23px);  /* the flow list */

  --leading-display:1.2;     /* serif headings, 45.6px at 38px */
  --leading-hero:1.1;        /* 39.6px at 36px */
  --leading-snug:1.2;
  --leading-body:1.4;        /* 22.4px at 16px */
  --leading-ui:1.5;          /* Inter body, 24px at 16px */
  --tracking-display:-.02em; /* serif headings */
  --tracking-hero:-.04em;
  --tracking-body:-.01em;
  --tracking-medium:-.02em;  /* medium-weight list titles */
  --tracking-ui:-.025em;     /* Inter 30px questions */
  --tracking-caps:.08em;
  --measure:37rem;           /* 595px, Tandem's subline width */
  --measure-narrow:23.25rem; /* 372px, Tandem's list column */

  /* Space */
  --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; --space-10:128px;
  --section-y:clamp(96px,10vw,144px);
  --card-inset:clamp(12px,1.6vw,24px);
  --content:1200px;          /* Tandem's content width at 1440 */

  /* Controls */
  --control-h:44px;          /* inputs and app buttons */
  --pill-h:32px;             /* marketing pills */
  --pill-pad:15px;

  /* Radii */
  --radius-xs:6px;           /* inputs */
  --radius-sm:8px;           /* tiles, small chips */
  --radius-card:10px;        /* feature cards */
  --radius-md:12px;          /* frosted chips and panels */
  --radius-lg:24px;          /* full-width film cards */
  --radius-pill:9999px;

  /* Shadows */
  --shadow-soft:0 1px 2px rgba(0,0,0,.05);
  --shadow-chip:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.28);
  --shadow-float:0 24px 48px -24px rgba(0,0,0,.4);
  --ring:0 0 0 2px #fff,0 0 0 4px var(--focus);

  /* Blur */
  --blur-glass:24px;
  --blur-pill:16px;
  --blur-nav:30px;

  /* Motion */
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-reveal:cubic-bezier(.16,1,.3,1);
  --ease-glide:cubic-bezier(.65,0,.35,1);
  --dur-fast:.15s;
  --dur-base:.3s;
  --dur-chip:.4s;            /* a twin chip fading and rising in */
  --dur-slow:.6s;
  --dur-glow:.9s;
  --dur-glide:.9s;
  --cycle:2.5s;
}

/* Reduced motion: every token-driven transition becomes an instant change,
   and components drop autoplay to their posters (see film.js). */
@media (prefers-reduced-motion:reduce) {
  :root, body.header-study {
    --dur-fast:0s; --dur-base:0s; --dur-chip:0s; --dur-slow:0s; --dur-glow:0s; --dur-glide:0s;
  }
}
@media (max-width:600px) {
  :root, body.header-study {
    --display-hero:30px; --display-lg:30px; --display-md:30px; --display-sm:26px;
  }
}