/* barehabits.app design tokens. The source of truth for every value the site uses.
   Rules for using them: design-system/README.md. Board: design-system/canvas.html.

   Two layers:
   1. Brand shell (:root) — warm neutral paper and ink, no accent of its own.
      Header, footer, home, blog chrome and the 404 page wear it.
   2. App themes (.fast, and one class per future app) — re-set the same colour roles and
      may add a --signature. Anything inside an element with the class wears that app.
   Components read roles only (--ink, --accent …), never a raw hex and never an app class. */

/* --- brand shell ----------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* colour roles */
  --bg: #F4F0EB;          /* page paper */
  --surface: #FBF8F4;     /* cards, notes, anything raised one step */
  --ink: #241F1A;         /* primary text, headings */
  --ink2: #6A6158;        /* secondary text, captions, nav — 5.2:1 on bg */
  --ink3: #9C9288;        /* faded marks: counters, list markers. Never for text that must be read */
  --line: #E5DED3;        /* rules between bands and sections */
  --hair: #EFEAE3;        /* fainter rules inside a block */
  --edge: #8F8880;        /* outline of a control (field, round button): 3:1 on bg and surface */
  --accent: #241F1A;      /* links and the main action. The shell's accent is its ink */
  --accent-soft: #EDE7DE; /* chips, selected rows */
  --on-accent: #FBF8F4;   /* text on a filled accent button */
  --signature: var(--ink2); /* an app's one decorative colour; the shell has none */
  --ph-bg: #FFF0BF;       /* [OWNER]/[CHECK] markers, must stay loud */
  --ph-ink: #5A4300;

  /* type */
  --serif: ui-serif, "New York", "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --t-poster: clamp(64px, 18vw, 196px);  /* home name only */
  --t-display: clamp(40px, 5.4vw, 68px); /* page h1: the one largest heading on a page */
  --t-section: clamp(30px, 3.6vw, 44px); /* section h2 of a band: one line on desktop, no forced breaks */
  --t-h2: clamp(28px, 3.2vw, 38px);      /* h2 inside prose: posts, documents */
  --t-h3: 21px;
  --t-lede: 19px;
  --t-prose: 17px;
  --t-body: 16px;
  --t-small: 14px;
  --t-kicker: 12px;                      /* uppercase, tracking .16em */

  /* space: a grid of 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 56px;   /* page side margin; 20 at phone width */
  --page: 1180px;   /* widest content */
  --measure: 680px; /* reading column */

  /* shape */
  --r-card: 20px; --r-small: 12px; --r-pill: 999px;

  /* motion: one loop only (breath); everything else is a response */
  --d-touch: 150ms;
  --d-change: 300ms;
  --d-breath: 6000ms;
  --ease-exhale: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}
/* scripts/theme.js pins light or dark with data-theme on <html>; without the script dark follows the
   system. Each dark block is written twice, for the system and for data-theme: keep the copies equal. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1714; --surface: #23201C;
    --ink: #F1EBE4; --ink2: #ADA398; --ink3: #7F766D;
    --line: #34302B; --hair: #2A2622; --edge: #726B63;
    --accent: #F1EBE4; --accent-soft: #2C2823; --on-accent: #1A1714;
    --ph-bg: #4A3A00; --ph-ink: #FFE7A0;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1714; --surface: #23201C;
  --ink: #F1EBE4; --ink2: #ADA398; --ink3: #7F766D;
  --line: #34302B; --hair: #2A2622; --edge: #726B63;
  --accent: #F1EBE4; --accent-soft: #2C2823; --on-accent: #1A1714;
  --ph-bg: #4A3A00; --ph-ink: #FFE7A0;
}

/* --- app themes ----------------------------------------------------------------
   Contract for a new app: copy this block, rename the class to the app's slug, take the
   values from the app's own design system (its bg, surface, ink…, accent), and give it a
   --signature. Set every role, in light and dark. Nothing else changes. */

/* Bare Fast — "Dawn", setting "Warm Haze". Values from barefast/design-system/tokens.css. */
.fast {
  --bg: #F6F1EE; --surface: #FCF9F7;
  --ink: #2A2233; --ink2: #6B6170; --ink3: #ADA3AB;
  --line: #E9DFDF; --hair: #F1EAE7; --edge: #918892;
  --accent: #5E4A8E; --accent-soft: #EEE6F0; --on-accent: #FCF9F7;
  --signature: linear-gradient(90deg in oklch, #6553A6, #C0708E, #E88A55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fast {
    --bg: #17141B; --surface: #221E27;
    --ink: #EFE8EC; --ink2: #A69CA8; --ink3: #7A707D;
    --line: #2F2A35; --hair: #26222B; --edge: #716A74;
    --accent: #A999E0; --accent-soft: #2B2536; --on-accent: #17141B;
    --signature: linear-gradient(90deg in oklch, #8C7BD6, #D783A3, #F29B64);
  }
}
:root[data-theme="dark"] .fast {
  --bg: #17141B; --surface: #221E27;
  --ink: #EFE8EC; --ink2: #A69CA8; --ink3: #7A707D;
  --line: #2F2A35; --hair: #26222B; --edge: #716A74;
  --accent: #A999E0; --accent-soft: #2B2536; --on-accent: #17141B;
  --signature: linear-gradient(90deg in oklch, #8C7BD6, #D783A3, #F29B64);
}