/* Veris design tokens, v1 (2026-10-05). Source of record: ../library-v1.html.
   Light is the default; dark applies under prefers-color-scheme or [data-theme="dark"].
   Fonts: Freight Display Pro via https://use.typekit.net/geb2hui.css (fallback Newsreader 500),
   Söhne self-hosted (../fonts/). */

:root {
  /* paper */
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --surface-2: #F2F0EB;
  --line: #E9E6DF;
  /* ink */
  --ink: #1F2D2E;
  --text: #2F3E3F;
  --muted: #5C6768;
  /* identity, action, decoration */
  --sage: #4A5D5E;
  --sage-soft: #E3E8E6;
  --accent: #D87854;
  --accent-ink: #A6512F;
  --accent-soft: #F7E4DA;
  --taupe: #B5967D;
  --taupe-ink: #7A5E45;
  --ok: #4C6A50;
  --on-sage: #F5F1E8;
  --on-accent: #FFFFFF;
  /* contrast fixes (21 audit F6/F8, Scott 2026-10-09 per Sable's picks):
     primary button fill (white on #A6512F = 5.47:1), focus ring (4.85:1 on bg),
     text on taupe = soft fill + taupe-ink (4.70:1), never white on taupe. */
  --action: #A6512F;
  --focus: #A6512F;
  --taupe-soft: #EBE3D8;
  --logo-plate: #F5F1E8;
  --scrim: rgba(31,45,46,.35);
  --shadow-pop: 0 24px 64px rgba(31,45,46,.18);
  /* depth */
  --shadow: 0 1px 2px rgba(47,62,63,.05), 0 8px 24px rgba(47,62,63,.06);
  --card-border: transparent;
  /* type */
  --serif: "freight-display-pro", "Newsreader", Georgia, serif;
  --sans: "Soehne", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --fs-display: 34px; --lh-display: 1.1;
  --fs-title: 24px;   --lh-title: 1.15;
  --fs-heading: 19px; --lh-heading: 1.3;
  --fs-body: 17px;    --lh-body: 1.55;
  --fs-secondary: 15px; --lh-secondary: 1.45;
  --fs-caption: 13px; --lh-caption: 1.4;
  /* sanctioned small size (21 audit F8): avatar initials, small-caps tags and
     kickers, dense calendar cells, tab-bar labels. Nothing else goes below 13. */
  --fs-micro: 11px;
  --ls-kicker: .04em;
  /* space, radius */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --gutter-phone: 20px; --gutter-tablet: 32px; --reading-width: 640px;
  --r-card: 18px; --r-row: 14px; --r-pill: 999px;
  /* motion */
  --t-tap: 180ms; --t-sheet: 260ms; --t-pill: 150ms; --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1D1E20; --surface: #232426; --surface-2: #2C2D30; --line: #333438;
    --ink: #ECEBE8; --text: #CFCDC8; --muted: #8E8C88;
    --sage: #8FA6A6; --sage-soft: #2A3232;
    --accent: #E38B69; --accent-ink: #E9A287; --accent-soft: #3A2A22;
    --taupe: #8C7460; --taupe-ink: #C9AE94;
    --ok: #8DB291; --on-sage: #1C1A17; --on-accent: #1C1A17;
    --shadow: none; --card-border: var(--line);
    --action: #E38B69; --focus: #E38B69; --taupe-soft: #433A31;
    --scrim: rgba(0,0,0,.55); --shadow-pop: 0 24px 64px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1D1E20; --surface: #232426; --surface-2: #2C2D30; --line: #333438;
  --ink: #ECEBE8; --text: #CFCDC8; --muted: #8E8C88;
  --sage: #8FA6A6; --sage-soft: #2A3232;
  --accent: #E38B69; --accent-ink: #E9A287; --accent-soft: #3A2A22;
  --taupe: #8C7460; --taupe-ink: #C9AE94;
  --ok: #8DB291; --on-sage: #1C1A17; --on-accent: #1C1A17;
  --shadow: none; --card-border: var(--line);
  --action: #E38B69; --focus: #E38B69; --taupe-soft: #433A31;
  --scrim: rgba(0,0,0,.55); --shadow-pop: 0 24px 64px rgba(0,0,0,.45);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-tap: 0ms; --t-sheet: 0ms; --t-pill: 0ms; }
}

/* ===== DESK LAYER (Sable 2026-10-17). Same brand tokens above; desktop density below.
   Internal tool: denser type, tighter radii, one accent per view. ===== */
@font-face{font-family:"Soehne";src:url("fonts/soehne-buch.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Soehne";src:url("fonts/soehne-buch-kursiv.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Soehne";src:url("fonts/soehne-halbfett.woff2") format("woff2");font-weight:600;font-display:swap}
:root{
  --d-fs-page: 26px;      /* serif page title, the one serif moment */
  --d-fs-section: 13px;   /* small-caps section kicker */
  --d-fs-row: 14px;       /* list rows */
  --d-fs-meta: 13px;
  --d-row-h: 34px;
  --d-sidebar-w: 248px;
  --d-r: 10px; --d-r-row: 8px;
  --d-hover: var(--surface-2);
  --d-selected: var(--sage-soft);
  --d-kbd-bg: var(--surface-2);
  /* stage dots: identity colors, never the accent */
  --stage-lead: var(--taupe); --stage-active: var(--sage); --stage-client: var(--ok); --stage-past: var(--muted);
  --overdue: var(--accent-ink);
}

/* ===== NOTES LAYER (Sable 2026-10-17, 67). "Heptabase meets Craft".
   Pages = Craft calm: no card frame, paper page, wide margins, airy blocks.
   Boards = Heptabase clear: quiet canvas, framed cards, tinted sections, thin labelled arrows.
   All values derive from brand tokens, so light and dark come from the same names.
   Selection is sage (identity); the accent stays reserved for the view's one primary action. */
:root{
  /* page */
  --n-page-w: 680px;            /* reading column */
  --n-fs-title: 36px; --n-lh-title: 1.12;   /* serif page title */
  --n-fs-h: 21px;               /* serif block heading */
  --n-fs-body: 17px; --n-lh-body: 1.65;
  --n-block-gap: 6px;           /* between blocks */
  --n-page-pad: 72px;           /* top whitespace above title */
  --n-indent: 26px;             /* outline nesting step */
  --n-guide: var(--line);       /* nesting guide line */
  --n-link: var(--sage); --n-link-line: color-mix(in srgb, var(--sage) 40%, transparent);
  --n-embed-bg: var(--taupe-soft); --n-embed-bar: var(--taupe); --n-embed-ink: var(--taupe-ink);
  --n-subpage-bg: var(--surface-2);
  /* board */
  --b-canvas: var(--bg);
  --b-dot: color-mix(in srgb, var(--muted) 28%, transparent);
  --b-dot-gap: 22px;
  --b-card: var(--surface);
  --b-card-line: var(--line);
  --b-card-r: 10px;
  --b-card-shadow: 0 1px 2px rgba(31,45,46,.06), 0 4px 12px rgba(31,45,46,.05);
  --b-card-w: 200px;
  --b-sec-fill: color-mix(in srgb, var(--sage) 7%, transparent);
  --b-sec-line: color-mix(in srgb, var(--sage) 30%, transparent);
  --b-sec-fill-2: color-mix(in srgb, var(--taupe) 10%, transparent);
  --b-sec-line-2: color-mix(in srgb, var(--taupe) 38%, transparent);
  --b-sec-r: 16px;
  --b-arrow: color-mix(in srgb, var(--muted) 75%, transparent);
  --b-arrow-w: 1.5px;
  --b-label-bg: var(--bg); --b-label-ink: var(--muted);
  --b-select: var(--sage);       /* ring + handles */
  --b-ghost: color-mix(in srgb, var(--sage) 45%, transparent); /* assistant proposals */
  --b-chrome: var(--surface); --b-chrome-line: var(--line);
}
:root[data-theme="dark"]{ --b-card-shadow: none; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --b-card-shadow: none; } }

/* ===== SLEEK LAYER (Sable 2026-10-19, 70). Scott: "bold words aesthetic is just not great",
   "emulate craft, emulate bear". Weight comes from size, spacing and grey steps, not bold.
   Values above were retuned (paper -> near-white, warm-brown dark -> Craft graphite).
   New names below are weights + quiet chrome; the build must route every font-weight through them. */
:root{
  --w-body: 400;          /* everything: rows, buttons, nav, Capture, page titles */
  --w-label: 600;         /* ONLY small section labels (12-13px): Starred, Folders, People */
  --w-heading: 400;       /* note H1/H2 (Bear): size carries it; no 500 cut is shipped */
  --d-sidebar-bg: var(--surface-2);
  --d-label-ink: var(--muted);
  --d-hint-ink: var(--muted);    /* italic empty-state hints under labels, like Craft */
  --d-nav-ink: var(--text);
  --d-row-sub: var(--muted);     /* "11 items", dates */
  --d-group-ink: var(--muted);   /* "Last 7 days", "October" group headers: 13px, regular */
  /* quiet buttons: ghost by default, one tinted primary per view, never bold */
  --btn-bg: transparent; --btn-ink: var(--text); --btn-line: var(--line);
  --btn-hover: var(--surface-2);
  --btn-primary-bg: var(--accent-soft); --btn-primary-ink: var(--accent-ink);
  --btn-h: 30px; --btn-r: 8px; --btn-fs: 13px;
  /* Bear writing column */
  --n-font-note: var(--sans);    /* note body in Soehne Buch, title too; serif only for Today date */
  --n-fs-title: 30px;
  --n-ink-heading: var(--ink);
  --n-mark: color-mix(in srgb, var(--accent) 22%, transparent);
}