/* Toronto Massage Guide - design tokens (v2, see docs/design/DESIGN.md §0). Plain CSS, no build step.
   Dark mode: automatic via prefers-color-scheme; force with <html data-theme="dark|light">. */

/* Latin text face: Instrument Sans (variable, OFL 1.1 - assets/fonts/OFL.txt), self-hosted, no CDN.
   Two names for one file: "TMG Sans" covers Latin incl. typographic punctuation (English pages);
   "TMG Sans Latin" leaves out curly quotes, the em dash and the ellipsis, so on Chinese pages “” —— …… come from the Chinese system font. The en dash U+2013 stays in both (number ranges such as 10:30–19:00). */
@font-face {
  font-family: "TMG Sans";
  src: url("../fonts/instrument-sans-latin-wght.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "TMG Sans Latin";
  src: url("../fonts/instrument-sans-latin-wght.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2013, U+20AC, U+2122, U+2212;
}

:root {
  color-scheme: light dark;

  /* Surfaces and ink (light): porcelain paper, white cards, sage mist for quiet panels */
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f0f2ee;
  --sage: #e7efea;
  --line: #e2e6e1;
  --line-strong: #85918b;   /* 3:1 on bg and surface: inputs, ghost buttons */
  --ink: #18211f;
  --ink-2: #47524e;
  --ink-3: #5e6965;         /* >= 4.5:1 on bg, surface-2 and sage */

  /* Brand: evergreen (the one action colour) and maple red (tiny editorial markers only) */
  --primary: #1e4d45;
  --primary-hover: #163c36;
  --on-primary: #ffffff;
  --accent: #a63a2c;
  --accent-soft: #f6e9e5;
  --link: #1e4d45;
  --focus: #1a73d9;

  /* Footer band */
  --footer-bg: #17332e;
  --footer-ink: #e7eeea;
  --footer-ink-2: #a9bab3;
  --footer-line: rgb(231 238 234 / 0.14);

  /* Semantic */
  --ok-bg: #e3f0e7;      --ok-ink: #1d5a3c;
  --warn-bg: #fbf0d6;    --warn-ink: #6b4a00;
  --err-bg: #f8e4e0;     --err-ink: #8f2218;
  --info-bg: #e5eff0;    --info-ink: #1d4f55;

  /* Partner "line" colours - each partner type is a transit line.
     Add a new type = add one --line-X / --line-X-soft pair (see DESIGN.md). */
  --line-care: #2f6b4f;       --line-care-soft: #e3efe7;
  --line-faith: #5b4b9a;      --line-faith-soft: #ece8f7;
  --line-community: #8a4b0f;  --line-community-soft: #f7e8d6;

  /* Type: self-hosted Latin face first, then system stacks (Chinese always on system fonts) */
  --font-sans: "TMG Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Headings use the same sans stack as body. (It used to be an Iowan/Palatino/Georgia serif stack, which made Latin
     names such as "Emerald Massage" render in a serif on Chinese pages while the CJK next to them was sans.) */
  --font-display: var(--font-sans);

  --fs-xs: 0.8125rem;   /* 13 meta, badges */
  --fs-sm: 0.9375rem;   /* 15 captions, buttons */
  --fs-base: 1.0625rem; /* 17 body */
  --fs-md: 1.1875rem;   /* 19 card titles, h3 (21 at 768+) */
  --fs-lg: 1.5rem;      /* 24 h2 (30 at 768+) */
  --fs-xl: 2rem;        /* 32 page / article h1 (46 at 768+) */
  --fs-hero: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);
  --lh-tight: 1.15;
  --lh-body: 1.65;
  --lh-cjk: 1.8;
  --track-display: -0.025em;  /* Latin headings only (:lang(en)); Chinese never gets letter-spacing */

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 96px;

  /* Radius and shadow (shadows tinted with the ink hue) */
  --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(24 33 31 / 0.06), 0 1px 1px rgb(24 33 31 / 0.03);
  --shadow-2: 0 10px 30px -12px rgb(24 33 31 / 0.18), 0 2px 6px rgb(24 33 31 / 0.04);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --measure: 42rem;       /* article column */
  --wrap: 74rem;          /* page max */
  --gutter: 20px;
  --tap: 44px;
  --tabbar-h: 60px;
  --site-header-h: 64px;
}

/* Chinese pages: same Latin face minus typographic punctuation, Chinese system fonts ahead of Segoe UI. */
:root:lang(zh) {
  --font-sans: "TMG Sans Latin", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Segoe UI", system-ui, sans-serif;
}

@media (min-width: 48em) { :root { --gutter: 40px; --fs-xl: 2.875rem; --fs-lg: 1.875rem; --fs-md: 1.3125rem; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1715; --surface: #16201d; --surface-2: #1c2825; --sage: #1d2c27;
    --line: #2a3733; --line-strong: #5f706a;
    --ink: #e7edea; --ink-2: #b5c2bd; --ink-3: #9aa8a3;
    --primary: #8fd1be; --primary-hover: #b0e0d1; --on-primary: #0b1f1a;
    --accent: #f0a08f; --accent-soft: #35211d;
    --link: #9ad8c6; --focus: #7db8ff;
    --footer-bg: #0a1210; --footer-ink: #e7edea; --footer-ink-2: #a3b3ad; --footer-line: rgb(231 237 234 / 0.12);
    --ok-bg: #173a2f; --ok-ink: #8fe0be;
    --warn-bg: #3c3010; --warn-ink: #f2d27a;
    --err-bg: #43211e; --err-ink: #ffb4aa;
    --info-bg: #163840; --info-ink: #9fe0e8;
    --line-care: #86dcb9; --line-care-soft: #173a2f;
    --line-faith: #c3b8f3; --line-faith-soft: #2d2848;
    --line-community: #f0c08a; --line-community-soft: #3d2c16;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 12px 30px -10px rgb(0 0 0 / 0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1715; --surface: #16201d; --surface-2: #1c2825; --sage: #1d2c27;
  --line: #2a3733; --line-strong: #5f706a;
  --ink: #e7edea; --ink-2: #b5c2bd; --ink-3: #9aa8a3;
  --primary: #8fd1be; --primary-hover: #b0e0d1; --on-primary: #0b1f1a;
  --accent: #f0a08f; --accent-soft: #35211d;
  --link: #9ad8c6; --focus: #7db8ff;
  --footer-bg: #0a1210; --footer-ink: #e7edea; --footer-ink-2: #a3b3ad; --footer-line: rgb(231 237 234 / 0.12);
  --ok-bg: #173a2f; --ok-ink: #8fe0be;
  --warn-bg: #3c3010; --warn-ink: #f2d27a;
  --err-bg: #43211e; --err-ink: #ffb4aa;
  --info-bg: #163840; --info-ink: #9fe0e8;
  --line-care: #86dcb9; --line-care-soft: #173a2f;
  --line-faith: #c3b8f3; --line-faith-soft: #2d2848;
  --line-community: #f0c08a; --line-community-soft: #3d2c16;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 12px 30px -10px rgb(0 0 0 / 0.6);
}