/* Smart Cycle — redesign concept tokens (isolated from the live app) */
/* Bricolage Grotesque (OFL-1.1), self-hosted, variable wght 200-800 + opsz 12-96 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/redesign/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/redesign/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Brand */
  --cobalt: oklch(0.45 0.25 266);
  --cobalt-deep: oklch(0.36 0.22 266);
  --cobalt-ink: oklch(0.22 0.09 266);
  --cobalt-soft: oklch(0.93 0.04 266);
  --cobalt-wash: oklch(0.97 0.015 266);
  --lime: oklch(0.93 0.21 124);
  --lime-deep: oklch(0.62 0.17 132);
  --lime-ink: oklch(0.3 0.08 132);
  --coral: oklch(0.7 0.19 32);
  --coral-deep: oklch(0.55 0.19 32);
  --coral-soft: oklch(0.95 0.03 32);
  --amber: oklch(0.8 0.15 75);
  --amber-ink: oklch(0.45 0.11 65);

  /* Neutrals (tinted toward cobalt) */
  --ink: oklch(0.17 0.03 266);
  --ink-2: oklch(0.24 0.03 266);
  --ink-3: oklch(0.32 0.03 266);
  --text: oklch(0.2 0.025 266);
  --text-muted: oklch(0.44 0.025 266);
  --bg: oklch(0.975 0.006 266);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.955 0.01 266);
  --line: oklch(0.9 0.012 266);
  --line-strong: oklch(0.8 0.02 266);

  /* Semantic */
  --ok: oklch(0.5 0.14 150);
  --ok-soft: oklch(0.95 0.04 150);
  --warn: var(--amber-ink);
  --warn-soft: oklch(0.96 0.05 85);
  --bad: var(--coral-deep);
  --bad-soft: var(--coral-soft);

  /* Therapy colors */
  --glp: var(--cobalt);
  --trt: var(--coral-deep);
  --pep: var(--lime-deep);

  /* Type */
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radii & motion */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z scale */
  --z-sticky: 10;
  --z-nav: 20;
  --z-sheet: 30;
  --z-toast: 40;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-optical-sizing: auto;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-light :focus-visible, .on-light:focus-visible { outline-color: var(--cobalt); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-toast);
  background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 999px;
  font-weight: 700; text-decoration: none; transition: top .2s var(--ease-out);
}
.skip:focus { top: 12px; }

/* Official Smart Cycle logo (web/img/smartcycle.png, used unmodified) */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; line-height: 0; border-radius: 14px; }
.brand img { display: block; height: var(--logo-h, 40px); width: auto; aspect-ratio: 1536 / 517; }
/* On saturated/dark surfaces the logo sits on a white plate so its own colors stay true */
.brand-plate { background: #fff; padding: 6px 12px; box-shadow: 0 10px 30px -14px oklch(0.2 0.1 266 / .55); }
.brand-dark { background: var(--ink); box-shadow: none; }
.brand-dark img { aspect-ratio: 209 / 83; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}