/* Jason's apps — design tokens, v0.4.0
   Source of truth: the HomeTracker phone (v8) and desktop (v1) mockups, 1 Nov 2026.

   Every colour in every app is one of these tokens. No colour literal appears
   in components.css, in an app's own CSS below its token block, or in JS.

   Names follow the vocabulary Apron, Cardigan and Recall already use
   (--bg, --surface, --muted, --accent, --good, --warn, --bad …), so an app
   adopts this file by replacing its own token block.

   Themes: dark is the default. Light follows the system unless the page sets
   data-theme="dark"; data-theme="light" forces light. data-outdoor="on"
   overrides both: maximum contrast for a phone in direct sun. */

:root {
  /* surfaces: cool, near-black */
  --page: #080a0e;          /* behind a centred layout or a sidebar app */
  --bg: #000000;            /* the screen itself */
  --surface: #11141b;       /* cards, lists */
  --surface-2: #1e2330;     /* inset tracks, chips, segmented backgrounds */
  --line: #222838;

  /* text */
  --text: #f3f6fc;
  --muted: #98a2b8;         /* secondary text */
  --faint: #5f687c;         /* hints, empty states, disabled */

  /* title block: the blue band behind every page title */
  --title-bg: #17325f;
  --title-text: #eaf1ff;
  --title-muted: #a9bfe6;

  /* accent: links, selection, primary buttons on surfaces */
  --accent: #5b8def;
  --accent-text: #ffffff;
  --focus: #7fb0ff;

  /* tones: the blue family for progress and data */
  --tone: #7fb0ff;          /* meters, planned time, rings in progress */
  --tone-2: #9a8cff;        /* a second series where two blues would blur */

  /* meaning: fixed across apps */
  --good: #3fcf5e;          /* done, free time, success */
  --good-bg: #13301d;
  --warn: #ff8f6b;          /* coral, the complement of blue: needs attention, only */
  --warn-bg: #3a1e14;
  --bad: #ff6a55;           /* failed, late, destructive */
  --bad-bg: #3d1f1b;
  --bad-solid: #c8382a;     /* a filled alarm with words on it: the "Not backed up" pill. 5.2:1 with white, in either theme */
  --on-bad-solid: #ffffff;
  --badge: #ff5a4a;         /* count badges */
  --badge-text: #ffffff;

  /* feature cards: the one suggestion, finished-project trophies */
  --feature-bg: #142a52;
  --feature-text: #eaf1ff;
  --feature-muted: #b6c9ee;
  --feature-bg-2: #0f1d38;  /* gradient end */
  --feature-cta: #ffffff;
  --feature-cta-text: #0b1220;

  --scrim: #000000a6;
  --shadow: #00000073;

  /* type, shape, size */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-title: 34px;         /* page title (desktop 32px) */
  --fs-hero: 58px;          /* one big number per page */
  --fs-h2: 25px;            /* section heads (desktop 21px) */
  --fs-body: 17px;
  --fs-small: 14.5px;
  --fs-tiny: 13px;
  --radius-lg: 22px;        /* cards, title block */
  --radius: 14px;           /* rows, inputs, tiles */
  --radius-sm: 10px;        /* chips */
  --tap: 44px;              /* minimum touch target */
  --gap: 16px;              /* page gutter on phones */
  --tabbar-h: 86px;
  --sidebar-w: 232px;
  /* layout switches from bottom tabs to sidebar at 1000px (media queries
     can't read custom properties, so components.css repeats the number) */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --page: #e3e8f1; --bg: #ffffff; --surface: #f3f6fb; --surface-2: #e4eaf4; --line: #dde3ee;
    --text: #0b1220; --muted: #55607a; --faint: #8a93a8;
    --title-bg: #dce8ff; --title-text: #0f2a5c; --title-muted: #3f5a8a;
    --accent: #2f66d6; --accent-text: #ffffff; --focus: #2f66d6;
    --tone: #3c74e0; --tone-2: #6a5ae0;
    --good: #1f9d47; --good-bg: #e2f5e8; --warn: #d4562f; --warn-bg: #fde9e1; --bad: #c8382a; --bad-bg: #fbe6e3;
    --feature-bg: #e3ecff; --feature-text: #0f2a5c; --feature-muted: #3f5a8a; --feature-bg-2: #d6e2fb;
    --feature-cta: #ffffff; --feature-cta-text: #0b1220;
    --scrim: #0b122066; --shadow: #0b122026;
  }
}
:root[data-theme="light"] {
  --page: #e3e8f1; --bg: #ffffff; --surface: #f3f6fb; --surface-2: #e4eaf4; --line: #dde3ee;
  --text: #0b1220; --muted: #55607a; --faint: #8a93a8;
  --title-bg: #dce8ff; --title-text: #0f2a5c; --title-muted: #3f5a8a;
  --accent: #2f66d6; --accent-text: #ffffff; --focus: #2f66d6;
  --tone: #3c74e0; --tone-2: #6a5ae0;
  --good: #1f9d47; --good-bg: #e2f5e8; --warn: #d4562f; --warn-bg: #fde9e1; --bad: #c8382a; --bad-bg: #fbe6e3;
  --feature-bg: #e3ecff; --feature-text: #0f2a5c; --feature-muted: #3f5a8a; --feature-bg-2: #d6e2fb;
  --feature-cta: #ffffff; --feature-cta-text: #0b1220;
  --scrim: #0b122066; --shadow: #0b122026;
}

/* App signature colours (v0.3.0, Jason 2 Nov 2026: "option C").
   Each app owns one deep colour, set by data-app on <html>, and uses it for
   three things only: the title block, the selected tab, and its home-screen
   icon. Everything else, the meaning colours above all, is shared, so a
   warning reads the same in every app. Each pair is checked against its own
   text. No data-app means HomeTracker's navy. The app's mark and name sit in
   the header too (.ds-appmark), so colour is never the only way to tell. */
:root[data-app="vitalitysync"] { --title-bg: #2f3744; --title-text: #eef1f6; --title-muted: #b3bccb; }
:root[data-app="apron"]        { --title-bg: #0f4a52; --title-text: #e3f8f8; --title-muted: #a6d6d8; }
:root[data-app="recall"]       { --title-bg: #5a1f33; --title-text: #fbe9ef; --title-muted: #e3b3c3; }
:root[data-app="cardigan"]     { --title-bg: #5a4210; --title-text: #fbf1d8; --title-muted: #e0cb98; }
@media (prefers-color-scheme: light) {
  :root[data-app="vitalitysync"]:not([data-theme="dark"]) { --title-bg: #e3e7ee; --title-text: #1f2733; --title-muted: #4a5568; }
  :root[data-app="apron"]:not([data-theme="dark"])        { --title-bg: #d6f1f2; --title-text: #0b3a40; --title-muted: #2f6a70; }
  :root[data-app="recall"]:not([data-theme="dark"])       { --title-bg: #f6dfe6; --title-text: #4a1528; --title-muted: #7a3a50; }
  :root[data-app="cardigan"]:not([data-theme="dark"])     { --title-bg: #f6ebcd; --title-text: #402e08; --title-muted: #6e5620; }
}
:root[data-app="vitalitysync"][data-theme="light"] { --title-bg: #e3e7ee; --title-text: #1f2733; --title-muted: #4a5568; }
:root[data-app="apron"][data-theme="light"]        { --title-bg: #d6f1f2; --title-text: #0b3a40; --title-muted: #2f6a70; }
:root[data-app="recall"][data-theme="light"]       { --title-bg: #f6dfe6; --title-text: #4a1528; --title-muted: #7a3a50; }
:root[data-app="cardigan"][data-theme="light"]     { --title-bg: #f6ebcd; --title-text: #402e08; --title-muted: #6e5620; }

/* Outdoor: a phone in July sun. Functional, not a preference. Near-white
   ground, near-black ink, every line drawn hard, meaning colours darkened
   until they survive glare. Still the blue family. */
:root[data-outdoor="on"] {
  --page: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-2: #e8edf6; --line: #0b1220;
  --text: #0b1220; --muted: #0b1220; --faint: #34405a;
  --title-bg: #0f2a5c; --title-text: #ffffff; --title-muted: #dce8ff;
  --accent: #0f2a5c; --accent-text: #ffffff; --focus: #0f2a5c;
  --tone: #0f3fa8; --tone-2: #3a2a9e;
  --good: #00602a; --good-bg: #d8f0e0; --warn: #9a2f00; --warn-bg: #fde3d6; --bad: #8c0000; --bad-bg: #fbdcd8; --bad-solid: #8c0000;
  --badge: #b00000;
  --feature-bg: #0f2a5c; --feature-text: #ffffff; --feature-muted: #dce8ff; --feature-bg-2: #0b1f45;
  --feature-cta: #ffffff; --feature-cta-text: #0b1220;
  --scrim: #0b122099; --shadow: #0b122040;
}