/* Habitus Mind design tokens: redesign 2026, "Kinetic editorial".
 *
 * The ONE source for colour, type, radius, shadow, spacing, layering and
 * focus across the public site and the app (DESIGN.md "Tokens"). Loaded
 * first; nothing else loads it yet (R1a). R1b points the public pages at
 * it; R2 repoints number-method/style.css's :root block at these names
 * (`--bg: var(--hm-bg)` and so on), so every module changes at once.
 *
 * Every name is prefixed --hm- so it cannot collide with the app's own
 * --bg/--ink/--accent or the public site's --color-* while both exist.
 *
 * Themes follow the app's convention (public/shell/shell.js wireTheme):
 *   no attribute or data-theme="dark"  dark (the brand; the public site)
 *   data-theme="light"                 light
 *   data-theme="system"                follows prefers-color-scheme
 * The light block is written twice (attribute, and system under the media
 * query) because CSS has no way to share one declaration block between a
 * selector and a media query; light-dark() would, but it drops every
 * token on iOS before 17.5. Change one, change the other.
 *
 * Contrast: every text pair below is WCAG AA (4.5:1) or better, measured
 * live on /brand/. Two rules that follow from the numbers:
 *   - Button labels on crimson are DARK (--hm-on-accent, 5.66:1). White
 *     on #ff3c4a is 3.50:1 and fails AA at button sizes; the pre-2026
 *     public CTA did exactly that.
 *   - Crimson as TEXT under 24px uses --hm-accent-ink: #ff5a66 on dark
 *     (so it still clears 4.5:1 on a crimson-tinted chip on a raised
 *     card, where #ff3c4a is 4.27:1) and a deeper #c8102e on light
 *     (#ff3c4a on the light base is 3.15:1). Display-size crimson (the
 *     H1's accent words, 24px and up) is the brand --hm-accent itself,
 *     under the 3:1 large-text rule. The crimson FILL is #ff3c4a in both
 *     themes.
 */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces: warm near-black, never #000 */
  --hm-bg: #0b0709;
  --hm-bg-deep: #060304;
  --hm-surface: #17101a;
  --hm-surface-2: #201623;
  --hm-surface-3: #2a1d2d;
  --hm-scrim: rgba(6, 3, 4, 0.72);

  /* Lines: 1px, crimson-tinted. --hm-line-field is the one border that
     must itself reach 3:1 (inputs, WCAG 1.4.11). */
  --hm-line: rgba(255, 60, 74, 0.12);
  --hm-line-strong: rgba(255, 60, 74, 0.22);
  --hm-line-field: #76646e;

  /* Ink */
  --hm-ink: #f6eeee;
  --hm-ink-2: #b8aab0;
  --hm-ink-3: #9c8d93;

  /* Crimson: the brand, and the ONLY button colour */
  --hm-accent: #ff3c4a;
  --hm-accent-hover: #ff5a66;
  --hm-accent-press: #e8323f;
  --hm-accent-ink: #ff5a66;
  --hm-accent-soft: rgba(255, 60, 74, 0.14);
  --hm-on-accent: #140609;

  /* Supporting inks, never on buttons */
  --hm-amber: #f5c26b;            /* motion-graphic ink, highlights, "what you said" */
  --hm-amber-soft: rgba(245, 194, 107, 0.14);
  --hm-ai: #9fd8ff;               /* anything that costs an AI Credit */
  --hm-ai-fill: #2563eb;          /* the AI-cost button (.btn-ai), white label */
  --hm-ai-soft: rgba(159, 216, 255, 0.12);
  --hm-on-ai: #ffffff;
  --hm-success: #4ade80;
  --hm-danger: #ff6b75;

  /* Hero ground: a deep radial gradient; grain is a separate layer */
  --hm-hero-grad:
    radial-gradient(120% 90% at 78% 12%, rgba(255, 60, 74, 0.20) 0%, rgba(255, 60, 74, 0) 55%),
    radial-gradient(90% 70% at 8% 100%, rgba(245, 194, 107, 0.08) 0%, rgba(245, 194, 107, 0) 60%),
    linear-gradient(180deg, #0b0709 0%, #060304 100%);
  --hm-grain-opacity: 0.05;

  /* Shadows: layered (soft + tight), warm-tinted, floating things only */
  --hm-shadow-float: 0 24px 48px -12px rgba(4, 1, 2, 0.62), 0 2px 4px rgba(4, 1, 2, 0.48);
  --hm-shadow-pop: 0 12px 24px -8px rgba(4, 1, 2, 0.55), 0 1px 2px rgba(4, 1, 2, 0.5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --hm-bg: #f7f2f0;
  --hm-bg-deep: #efe7e4;
  --hm-surface: #ffffff;
  --hm-surface-2: #f3ecea;
  --hm-surface-3: #ebe1de;
  --hm-scrim: rgba(28, 18, 22, 0.44);
  --hm-line: rgba(200, 16, 46, 0.12);
  --hm-line-strong: rgba(200, 16, 46, 0.22);
  --hm-line-field: #8c7c84;
  --hm-ink: #1c1216;
  --hm-ink-2: #5e5057;
  --hm-ink-3: #6b5d64;
  --hm-accent: #ff3c4a;
  --hm-accent-hover: #ff5a66;
  --hm-accent-press: #e8323f;
  --hm-accent-ink: #c8102e;
  --hm-accent-soft: rgba(255, 60, 74, 0.08);
  --hm-on-accent: #140609;
  --hm-amber: #8a5a00;
  --hm-amber-soft: rgba(245, 194, 107, 0.28);
  --hm-ai: #1d3fae;
  --hm-ai-fill: #1d4ed8;
  --hm-ai-soft: rgba(29, 78, 216, 0.08);
  --hm-on-ai: #ffffff;
  --hm-success: #15803d;
  --hm-danger: #b91c2a;
  --hm-hero-grad:
    radial-gradient(120% 90% at 78% 12%, rgba(255, 60, 74, 0.14) 0%, rgba(255, 60, 74, 0) 55%),
    radial-gradient(90% 70% at 8% 100%, rgba(245, 194, 107, 0.22) 0%, rgba(245, 194, 107, 0) 60%),
    linear-gradient(180deg, #f7f2f0 0%, #efe7e4 100%);
  --hm-grain-opacity: 0.035;
  --hm-shadow-float: 0 24px 48px -12px rgba(60, 20, 30, 0.18), 0 2px 4px rgba(60, 20, 30, 0.10);
  --hm-shadow-pop: 0 12px 24px -8px rgba(60, 20, 30, 0.16), 0 1px 2px rgba(60, 20, 30, 0.10);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --hm-bg: #f7f2f0;
    --hm-bg-deep: #efe7e4;
    --hm-surface: #ffffff;
    --hm-surface-2: #f3ecea;
    --hm-surface-3: #ebe1de;
    --hm-scrim: rgba(28, 18, 22, 0.44);
    --hm-line: rgba(200, 16, 46, 0.12);
    --hm-line-strong: rgba(200, 16, 46, 0.22);
    --hm-line-field: #8c7c84;
    --hm-ink: #1c1216;
    --hm-ink-2: #5e5057;
    --hm-ink-3: #6b5d64;
    --hm-accent: #ff3c4a;
    --hm-accent-hover: #ff5a66;
    --hm-accent-press: #e8323f;
    --hm-accent-ink: #c8102e;
    --hm-accent-soft: rgba(255, 60, 74, 0.08);
    --hm-on-accent: #140609;
    --hm-amber: #8a5a00;
    --hm-amber-soft: rgba(245, 194, 107, 0.28);
    --hm-ai: #1d3fae;
    --hm-ai-fill: #1d4ed8;
    --hm-ai-soft: rgba(29, 78, 216, 0.08);
    --hm-on-ai: #ffffff;
    --hm-success: #15803d;
    --hm-danger: #b91c2a;
    --hm-hero-grad:
      radial-gradient(120% 90% at 78% 12%, rgba(255, 60, 74, 0.14) 0%, rgba(255, 60, 74, 0) 55%),
      radial-gradient(90% 70% at 8% 100%, rgba(245, 194, 107, 0.22) 0%, rgba(245, 194, 107, 0) 60%),
      linear-gradient(180deg, #f7f2f0 0%, #efe7e4 100%);
    --hm-grain-opacity: 0.035;
    --hm-shadow-float: 0 24px 48px -12px rgba(60, 20, 30, 0.18), 0 2px 4px rgba(60, 20, 30, 0.10);
    --hm-shadow-pop: 0 12px 24px -8px rgba(60, 20, 30, 0.16), 0 1px 2px rgba(60, 20, 30, 0.10);
  }
}

/* Theme-independent tokens */
:root {
  /* Type. Two web families on the public site (Bricolage Grotesque,
     Inter); JetBrains Mono is loaded by the app only, so on public pages
     --hm-font-mono falls through to the system mono. Han characters are
     not in either Latin face and fall to the CJK stack at the end of
     each family list; no Noto Sans SC download (budget, brief s2). */
  --hm-cjk: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
  --hm-font-display: "Bricolage Grotesque", "Bricolage Fallback", var(--hm-cjk), ui-sans-serif, system-ui, sans-serif;
  --hm-font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, var(--hm-cjk), sans-serif;
  --hm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, var(--hm-cjk), monospace;

  /* Scale (px at 16px root). Display sizes are fluid; nothing below
     --hm-fs-label (12px) anywhere, and never tracked all-caps under 12. */
  --hm-fs-display: clamp(40px, 8vw, 88px);
  --hm-fs-h2: clamp(30px, 5vw, 56px);
  --hm-fs-h3: clamp(22px, 2.4vw, 30px);
  --hm-fs-h4: 20px;
  --hm-fs-lede: clamp(18px, 1.5vw, 21px);
  --hm-fs-body: 16px;
  --hm-fs-small: 14px;
  --hm-fs-label: 12px;
  --hm-fs-num-xl: clamp(40px, 6vw, 64px);

  --hm-lh-display: 0.95;
  --hm-lh-h2: 1.02;
  --hm-lh-h3: 1.15;
  --hm-lh-body: 1.55;
  --hm-lh-tight: 1.3;

  --hm-track-display: -0.04em;
  --hm-track-h2: -0.03em;
  --hm-track-h3: -0.015em;
  --hm-track-label: 0.02em;

  /* Weights (Bricolage is variable 500..800; Inter 400..600) */
  --hm-w-display: 760;
  --hm-w-h2: 700;
  --hm-w-h3: 620;
  --hm-w-body: 400;
  --hm-w-ui: 500;
  --hm-w-strong: 600;

  /* Radius: 8 / 14 / 20 / pill. Nested radii stay concentric:
     inner = outer - padding, floored at --hm-r-1. */
  --hm-r-1: 8px;
  --hm-r-2: 14px;
  --hm-r-3: 20px;
  --hm-r-pill: 999px;

  /* Spacing: 4px base */
  --hm-sp-1: 4px;
  --hm-sp-2: 8px;
  --hm-sp-3: 12px;
  --hm-sp-4: 16px;
  --hm-sp-5: 20px;
  --hm-sp-6: 24px;
  --hm-sp-8: 32px;
  --hm-sp-10: 40px;
  --hm-sp-12: 48px;
  --hm-sp-16: 64px;
  --hm-sp-20: 80px;
  --hm-sp-24: 96px;
  --hm-sp-32: 128px;

  /* Layout */
  --hm-page-max: 1200px;
  --hm-measure: 65ch;
  --hm-gutter: 16px;
  --hm-section-gap: clamp(64px, 10vw, 128px);
  --hm-hit: 44px;

  /* Layering */
  --hm-z-raised: 10;
  --hm-z-sticky: 100;
  --hm-z-header: 200;
  --hm-z-overlay: 400;
  --hm-z-modal: 500;
  --hm-z-toast: 600;

  /* Focus: 2px ring, 2px offset, on every control */
  --hm-focus-width: 2px;
  --hm-focus-offset: 2px;
}

@media (min-width: 768px) {
  :root { --hm-gutter: 32px; }
}
@media (min-width: 1200px) {
  :root { --hm-gutter: 40px; }
}

/* Chinese: the display scale stays, one step lighter, no negative
   tracking (Han characters are already set solid). */
:lang(zh) {
  --hm-w-display: 680;
  --hm-w-h2: 620;
  --hm-w-h3: 560;
  --hm-track-display: 0;
  --hm-track-h2: 0;
  --hm-track-h3: 0;
  --hm-lh-display: 1.08;
  --hm-lh-h2: 1.14;
}

/* Metric-matched fallbacks so the swap from system font to web font
   does not move the H1 (CLS). Measured 2026-09-29 in headless Chrome with
   canvas measureText over one 88-character sample: advance width against
   Arial (Bricolage at 760 against Arial Bold, Inter 400 against Arial
   400) gives size-adjust, and the web font's own ascent and descent
   divided by it give the overrides. Re-measure if the weights change. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("Helvetica"), local("Helvetica Neue");
  size-adjust: 92.2%;
  ascent-override: 100.9%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Helvetica Neue");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}