/* junehealth.app — design tokens.
   Source of truth: PearlKit/Sources/PearlKit/Design/PearlTheme.swift (Celestial stops),
   via docs/store/frames/shared/tokens.css. Point values there are ×3 for device pixels;
   here they are ÷3 back to CSS px. Hex values are identical to the app. */

:root {
  /* Palette — Celestial (dark) */
  --night: #1C1130;        /* canvas — the app's dark "bone" */
  --card: #261A42;         /* raised cards */
  --oyster: #372A55;       /* dividers */
  --shell: #4A3B6B;        /* borders */
  --ink: #F2EEFA;          /* starlight text */
  --ink60: #C5BBDD;
  --ink40: #8F84AC;
  --surface2: #322453;
  --on-accent: #1C1130;

  /* Light stops (the one bright section) */
  --bone-light: #F7F4EF;
  --cream-light: #FFFEFB;
  --ink-light: #1F1C18;
  --ink60-light: #4A443C;
  --sep-light: #E8E2D9;

  /* Data colours — each owns one meaning; washes only, never full-strength fills */
  --flow: #E4574C;
  --fertile: #53E39B;
  --luteal: #9F7BE8;
  --follicular: #F08FA0;

  /* Night scene */
  --sky-top: #241743;
  --sky-mid: #3A2664;
  --sky-bottom: #180F2B;
  --star: #EDE9F8;
  --aurora-teal: #3FD9C0;
  --aurora-rose: #E86BB0;
  --aurora-amber: #F2B45C;
  --glass-stroke: rgba(255, 255, 255, 0.08);

  /* Blush accent family */
  --blush-peach: #FFCFAC;
  --blush-core: #FF9E80;
  --blush-rose: #FF938B;
  --blush-deep-peach: #F98E58;
  --blush-deep-rose: #F0776B;

  /* Bubbles (Ask June) */
  --bubble-in: #261A42;
  --bubble-out: #412B4D;

  /* Gradients */
  --cta-blush: linear-gradient(90deg, #F98E58, #F0776B);
  --flood: linear-gradient(135deg, #3A2664, #241743 55%, #180F2B);

  /* Shape (app pt values) */
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-sheet: 24px;
  --radius-glass: 26px;
  --radius-canvas: 24px;   /* the inset hero canvas */

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --h1: clamp(2.75rem, 6.2vw, 5rem);          /* 44 → 80 */
  --h2: clamp(2.125rem, 4.4vw, 3.5rem);       /* 34 → 56 */
  --h3: clamp(1.375rem, 2.4vw, 1.75rem);      /* 22 → 28 */
  --lede: clamp(1.125rem, 1.8vw, 1.3125rem);  /* 18 → 21 */
  --body: 1.0625rem;                          /* 17 — the app's body size */

  /* Rhythm — chapterGap ("one idea per viewport, open sky between") */
  --chapter: clamp(6rem, 12vw, 10rem);
  --margin: clamp(1.25rem, 4vw, 2rem);
  --content: 72.5rem;                          /* 1160px */

  /* Motion — "slow and few" */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --t-standard: 0.24s;
}