/* Mana³ tokens: the design system's tokens.json as CSS variables
   (design system "Mana³", https://claude.ai/artifact/9HrgRPrrMgkWhZY5egeHMk,
   version 1791145085-f627, read 2026-10-05). The design system is the
   source: a token changes there first, then here, value for value.
   Its own tokens.css is generated by its page and not served, so this file
   is written from tokens.json: the variables, the font, and the type styles
   as classes (since B3, 2026-10-05; .figure-hero ... .nav, checked free of
   any class the old screens use).

   Inter, self-hosted (decision 80): one variable file, Latin set, SIL Open
   Font License 1.1 (Inter-OFL.txt beside it). No Google Fonts: they send
   each client's IP address to Google. */

@font-face {
  font-family: "Inter";
  src: url("Inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0a0a0a;
  --bone: #f5f5f0;
  --muted: #a3a39e;
  --subdued: #888888;
  --surface: #141416;
  --surface-glass: rgba(20, 20, 22, 0.92);
  --surface-raised: #1c1c1f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --range-track: rgba(245, 245, 240, 0.10);
  --range-band: rgba(245, 245, 240, 0.28);
  --mana-blue: #3a86ff;
  --mana-green: #38b000;
  --mana-yellow: #ffd60a;
  --mana-red: #ff0033;
  --area-sleep: var(--mana-blue);
  --area-recovery: var(--mana-green);
  --area-personal: var(--mana-yellow);
  --area-load: var(--mana-red);
  --recording: var(--mana-yellow);
  --on-yellow: var(--ink);
  --action: var(--bone);
  --on-action: var(--ink);
  --focus-ring: var(--bone);
  --notice-fill: #2a2a2d;
  --notice-ink: #c9c9c4;
  --sleep-tint: rgba(58, 134, 255, 0.10);
  --recovery-tint: rgba(56, 176, 0, 0.10);
  --personal-tint: rgba(255, 214, 10, 0.10);
  --load-tint: rgba(255, 0, 51, 0.10);

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-nav: 104px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-nav: 0 12px 32px rgba(0, 0, 0, 0.6);
  --blur-glass: 24px;
  --hole-hero: 0.9;
  --hole-behind-data: 0.35;
}

/* Type styles (tokens.json type.groups). Figures: light, tight, tabular. */
.figure-hero { font-family: var(--font-sans); font-size: 76px; line-height: 76px; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.figure      { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.figure-sm   { font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.unit        { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 400; }
.greeting    { font-family: var(--font-sans); font-size: 34px; line-height: 40px; font-weight: 300; letter-spacing: -0.02em; }
.title       { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.heading     { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 500; }
.body        { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm     { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label       { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; }
.caption     { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.nav         { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 500; }