:root {
  /* Brand surfaces */
  --navy: #03234d;
  --navy-2: #0b3166;          /* lower end of the hero gradient */
  --on-navy: #ffffff;
  --on-navy-2: #b9c6dc;       /* secondary text on navy */

  /* Tappable (orange) */
  --accent: #c2540a;          /* button fill; white text on it = 4.6:1 */
  --accent-hover: #a94808;
  --on-accent: #ffffff;
  --link: #b84f09;            /* text links on --bg / --card (4.7:1) */
  --link-on-navy: #f59b56;    /* text links on navy (7:1) */
  --focus: #b84f09;           /* focus ring on light surfaces */
  --focus-on-navy: #ffb27a;   /* focus ring on navy */

  /* Page surfaces and text */
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #0f1b2d;
  --text-2: #5a6678;          /* secondary text */
  --line: #e2e7ef;
  --good: #1a7a43;            /* done tick in the example card */
  --tint-bg: #e8eef9;         /* icon tiles and the Next time panel */
  --tint-fg: #0b3166;         /* icons on --tint-bg */
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .05), 0 1px 1px rgba(15, 27, 45, .03);
  --shadow-md: 0 12px 32px -12px rgba(15, 27, 45, .18), 0 2px 6px rgba(15, 27, 45, .05);
  --shadow-phone: 0 40px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-caption: 13px;
  --fs-h1-hero: clamp(38px, 7vw, 68px);
  --fs-h1-page: clamp(34px, 6vw, 48px);
  --fs-h2: clamp(28px, 4.5vw, 40px);
  --fs-h3: 19px;
  --lh: 1.55;

  /* Shape and space */
  --radius: 20px;
  --radius-lg: 24px;
  --radius-sm: 14px;
  --max: 1120px;              /* page width */
  --max-text: 760px;          /* text pages (support, privacy) */
  --gutter: 16px;
  --section-y: 88px;
  --tap: 44px;                /* minimum tap target */
  --header-h: 64px;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #0e2347; --navy-2: #163262; --on-navy-2: #a9b8d1;
    --accent: #f08a3e; --accent-hover: #f59b56; --on-accent: #151b26;
    --link: #f08a3e; --link-on-navy: #f59b56; --focus: #f59b56; --focus-on-navy: #ffb27a;
    --bg: #151b26; --card: #1e2635; --text: #e8edf5; --text-2: #9aa7ba; --line: #2c3648;
    --good: #4cc282; --tint-bg: #283450; --tint-fg: #cfdcf5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .5); --shadow-phone: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --navy: #0e2347; --navy-2: #163262; --on-navy-2: #a9b8d1;
  --accent: #f08a3e; --accent-hover: #f59b56; --on-accent: #151b26;
  --link: #f08a3e; --link-on-navy: #f59b56; --focus: #f59b56; --focus-on-navy: #ffb27a;
  --bg: #151b26; --card: #1e2635; --text: #e8edf5; --text-2: #9aa7ba; --line: #2c3648;
  --good: #4cc282; --tint-bg: #283450; --tint-fg: #cfdcf5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .5); --shadow-phone: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1);
  color-scheme: dark;
}

/* Web app tokens (not on the marketing site). Charts: blue series, teal for records and goals (orange is only for things you tap, UI_STYLE 2). */
:root { --danger: #b42318; --danger-bg: #fdecea; --chart-1: #2f5fb3; --chart-2: #0f7f74; --chart-3: #b9c6dc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger: #ff8a80; --danger-bg: #3a2024; --chart-1: #7aa7ff; --chart-2: #4fd1c5; --chart-3: #3b4a66; } }
:root[data-theme="dark"] { --danger: #ff8a80; --danger-bg: #3a2024; --chart-1: #7aa7ff; --chart-2: #4fd1c5; --chart-3: #3b4a66; }