/* ==========================================================================
   Jotspeed design tokens — v2 PROPOSAL: preview only, pending Jimmy's
   approval of the preview. 2026-10-26. Not official; v1 is current.
   Logo: current yellow mark, unchanged. Logo proposals (v2 flat, v3, v4) are closed.
   App copy (brand-v2-preview): Sloan's file with the Lightning/bolt token removed and
   the text selection set to Lavender (purple) instead of Lightning.
   Built to Jimmy's direction (2026-10-26). Nothing ships until he approves.

   Rules baked in:
   - Purple #5C4A8A is the one accent: primary buttons, focus, links, selected rows.
   - Ink #36312D is the text color.
   - Red is functional only: error text, error borders/icons, and the
     destructive confirm button. Never brand, accent, marketing or graphics.
   - Neutrals are tints of ink; accent tints are tints of purple. No new hues.
   - Fonts: system UI stack (free, nothing to license or download).
   Prefix: --js-
   ========================================================================== */

:root {
  /* ---------- Fonts ---------- */
  /* System UI stack: instant, offline, no webfont download. */
  --js-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", system-ui,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Optional "Journal" reading style for entry bodies (system serif, nothing to download). */
  --js-font-jot: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  /* Wordmark / marketing display. Source Serif 4 is OFL. Logo usage unchanged. */
  --js-font-display: "Source Serif 4", Palatino, "Palatino Linotype", Georgia, serif;
  --js-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --js-weight-regular: 400;
  --js-weight-medium: 600;   /* buttons, labels, section titles */
  --js-weight-strong: 700;   /* view titles */

  /* ---------- Type scale (px; dense app scale, 14px base) ---------- */
  --js-text-caption: 12px;      --js-leading-caption: 16px;   /* timestamps, meta, hints */
  --js-text-copy: 13px;         --js-leading-copy: 18px;      /* menus, buttons, secondary rows */
  --js-text-body: 14px;         --js-leading-body: 21px;      /* entry text, inputs, list rows */
  --js-text-subtitle: 16px;     --js-leading-subtitle: 22px;  /* settings section titles, dialog titles */
  --js-text-header: 20px;       --js-leading-header: 26px;    /* view title (Today, a @tag) */
  --js-text-header-lg: 24px;    --js-leading-header-lg: 30px; /* empty states, page titles */
  --js-text-header-xl: 32px;    --js-leading-header-xl: 38px; /* marketing only */
  --js-tracking-tight: -0.01em; /* headers 20px+ */

  /* ---------- Color: brand ---------- */
  --js-color-purple: #5c4a8a;          /* primary accent */
  --js-color-purple-hover: #4e3f76;    /* derived: purple darkened ~15% */
  --js-color-purple-active: #43366a;   /* derived: purple darkened ~27% */
  --js-color-purple-disabled: #ada4c4; /* derived: 50% purple on white */
  --js-color-purple-tint: #ece4f7;     /* selected row, tag chip, active nav */
  --js-color-purple-tint-2: #f4f0fa;   /* hover on purple-tinted surfaces */
  --js-color-ink: #36312d;             /* primary text */
  /* Starred entry: Purple fill (7.5:1 on white). Lightning was the v2 star, but it is only 1.45:1 on Paper
     (below the 3:1 non-text minimum), so the star stays Purple. */
  --js-color-star: #5c4a8a;
  --js-color-lavender: #b39fd0;        /* icon field; primary fill in dark mode */

  /* ---------- Color: neutrals (from ink) ---------- */
  --js-color-paper: #f6f1e8;     /* app field */
  --js-color-sheet: #fffdf8;     /* raised surfaces: menus, dialogs, composer */
  --js-color-field: #ffffff;     /* input fill */
  --js-color-ink-2: #6f675d;     /* secondary text (4.95:1 on paper) */
  --js-color-ink-3: #8a8178;     /* placeholder, disabled text, decorative only */
  --js-color-line: #e7e0d4;      /* hairlines, row dividers, input border */
  --js-color-line-strong: #d4cbb8; /* input border on hover, dividers in menus */
  --js-color-hover: rgba(54, 49, 45, 0.05);   /* ghost hover fill */
  --js-color-pressed: rgba(54, 49, 45, 0.09); /* ghost active fill */
  --js-color-scrim: rgba(54, 49, 45, 0.45);

  /* ---------- Color: semantic ---------- */
  --js-color-text: var(--js-color-ink);
  --js-color-text-muted: var(--js-color-ink-2);
  --js-color-text-subtle: var(--js-color-ink-3);
  --js-color-accent: var(--js-color-purple);
  --js-color-on-accent: #ffffff;
  --js-color-link: var(--js-color-purple);
  --js-color-selection: rgba(179, 159, 208, 0.45); /* Lavender at 45% (purple selection, no bolt yellow) */

  /* ---------- Color: danger (functional only: errors + destructive) ---------- */
  /* Red never appears in brand, accent, marketing, site graphics or illustration. */
  --js-color-danger: #b42318;        /* destructive confirm fill; error border + icon. White on it 6.57:1 */
  --js-color-danger-hover: #981b12;  /* white on it 8.40:1 */
  --js-color-danger-active: #7f1610; /* white on it 10.37:1 */
  --js-color-danger-text: #b42318;   /* error message text: 6.57:1 on white, 5.84:1 on Paper, 6.47:1 on Sheet */
  --js-color-on-danger: #ffffff;
  --js-color-destructive: var(--js-color-danger);
  --js-color-error-text: var(--js-color-danger-text);
  --js-color-error-border: var(--js-color-danger);

  /* ---------- Radius ---------- */
  --js-radius-sm: 5px;    /* buttons, inputs, inline tags, icon buttons */
  --js-radius-chip: 8px;  /* filter chips */
  --js-radius-lg: 10px;   /* menus, popovers, tooltips, cards, list-row hover */
  --js-radius-xl: 16px;   /* dialogs, bottom sheets (top corners) */
  --js-radius-pill: 999px; /* switches, counters, progress */

  /* ---------- Spacing (4px base) ---------- */
  --js-space-1: 2px;
  --js-space-2: 4px;
  --js-space-3: 8px;
  --js-space-4: 12px;
  --js-space-5: 16px;
  --js-space-6: 24px;
  --js-space-7: 32px;
  --js-space-8: 48px;
  --js-content-max: 800px;   /* timeline column */
  --js-sidebar-w: 280px;

  /* ---------- Buttons ---------- */
  --js-btn-h-sm: 28px;  --js-btn-px-sm: 8px;   --js-btn-text-sm: var(--js-text-caption);
  --js-btn-h: 32px;     --js-btn-px: 12px;     --js-btn-text: var(--js-text-copy);
  --js-btn-h-lg: 36px;  --js-btn-px-lg: 16px;  --js-btn-text-lg: var(--js-text-body);
  --js-btn-icon: 24px;  /* square icon-only button (row actions, toolbar) */
  --js-btn-radius: var(--js-radius-sm);
  --js-btn-weight: var(--js-weight-medium);
  --js-btn-gap: 6px;    /* icon-to-label */
  /* primary */
  --js-btn-primary-bg: var(--js-color-purple);
  --js-btn-primary-bg-hover: var(--js-color-purple-hover);
  --js-btn-primary-bg-active: var(--js-color-purple-active);
  --js-btn-primary-bg-disabled: var(--js-color-purple-disabled);
  --js-btn-primary-fg: #ffffff;
  /* secondary (neutral fill) */
  --js-btn-secondary-bg: rgba(54, 49, 45, 0.06);
  --js-btn-secondary-bg-hover: rgba(54, 49, 45, 0.10);
  --js-btn-secondary-bg-active: rgba(54, 49, 45, 0.14);
  --js-btn-secondary-fg: var(--js-color-ink);
  /* tertiary (text button, purple label) */
  --js-btn-tertiary-fg: var(--js-color-purple);
  --js-btn-tertiary-bg-hover: var(--js-color-purple-tint-2);
  /* quaternary (icon / ghost, muted) */
  --js-btn-ghost-fg: var(--js-color-ink-2);
  --js-btn-ghost-fg-hover: var(--js-color-ink);
  --js-btn-ghost-bg-hover: var(--js-color-hover);
  /* destructive confirm (only inside a confirm step): danger red */
  --js-btn-destructive-bg: var(--js-color-danger);
  --js-btn-destructive-bg-hover: var(--js-color-danger-hover);
  --js-btn-destructive-bg-active: var(--js-color-danger-active);
  --js-btn-destructive-fg: var(--js-color-on-danger);
  --js-btn-disabled-opacity: 1; /* use the disabled colors, not opacity, for fills */

  /* ---------- Focus ---------- */
  --js-focus-ring: 0 0 0 1px var(--js-color-purple), 0 0 0 4px rgba(92, 74, 138, 0.22);
  --js-focus-outline: 2px solid var(--js-color-purple);
  --js-focus-offset: 2px;

  /* ---------- Inputs ---------- */
  --js-input-h: 32px;
  --js-input-h-lg: 36px;
  --js-input-px: 8px;
  --js-input-text: var(--js-text-body);
  --js-input-radius: var(--js-radius-sm);
  --js-input-bg: var(--js-color-field);
  --js-input-border: var(--js-color-line);
  --js-input-border-hover: var(--js-color-line-strong);
  --js-input-border-focus: var(--js-color-purple);
  --js-input-border-error: var(--js-color-danger);
  --js-input-placeholder: var(--js-color-ink-3);
  --js-input-label-text: var(--js-text-copy);
  --js-input-label-weight: var(--js-weight-medium);
  --js-input-hint-text: var(--js-text-caption);

  /* ---------- List rows (timeline entries) ---------- */
  --js-row-py: 8px;
  --js-row-px: 0px;           /* rows sit flush in the column; hover fill bleeds 8px */
  --js-row-min-h: 44px;       /* touch target */
  --js-row-gap: 12px;         /* time column to body */
  --js-row-time-w: 44px;      /* "14:05" in caption, tabular nums */
  --js-row-divider: 1px solid var(--js-color-line);
  --js-row-hover-bg: var(--js-color-hover);
  --js-row-selected-bg: var(--js-color-purple-tint);
  --js-row-radius: var(--js-radius-lg); /* hover/selected fill corners */
  --js-row-actions-gap: 4px;  /* star, overflow: 24px icon buttons, show on hover/focus */
  --js-row-day-header-text: var(--js-text-copy); /* "Today", "Mon, Aug 24" */
  --js-row-day-header-weight: var(--js-weight-strong);

  /* ---------- Menus / popovers / settings ---------- */
  --js-menu-min-w: 240px;
  --js-menu-max-h: 350px;
  --js-menu-py: 4px;
  --js-menu-item-h: 32px;
  --js-menu-item-px: 10px;
  --js-menu-item-text: var(--js-text-copy);
  --js-menu-item-radius: var(--js-radius-sm);
  --js-menu-item-hover-bg: var(--js-color-hover);
  --js-menu-separator: 1px solid var(--js-color-line);
  --js-menu-radius: var(--js-radius-lg);
  --js-settings-w: 800px;
  --js-settings-nav-w: 220px;
  --js-settings-nav-item-h: 32px;
  --js-settings-row-py: 12px;

  /* ---------- Icons ---------- */
  --js-icon-sm: 16px;
  --js-icon: 24px;   /* 24 grid; glyph lives in ~18px live area */
  --js-icon-stroke: 1.5px;

  /* ---------- Shadows (ink-tinted, soft) ---------- */
  --js-shadow-1: 0 1px 2px rgba(54, 49, 45, 0.06), 0 1px 4px -1px rgba(54, 49, 45, 0.10); /* cards, hover lift */
  --js-shadow-2: 0 4px 10px rgba(54, 49, 45, 0.10), 0 8px 18px 4px rgba(54, 49, 45, 0.05); /* menus, popovers */
  --js-shadow-3: 0 16px 50px rgba(54, 49, 45, 0.20), 0 4px 7px rgba(54, 49, 45, 0.06); /* dialogs, sheets */
  --js-shadow-drag: 0 5px 8px rgba(54, 49, 45, 0.16);

  /* ---------- Motion ---------- */
  --js-motion-instant: 100ms;  /* hover color */
  --js-motion-fast: 150ms;     /* button press, checkbox, row actions fade */
  --js-motion-base: 200ms;     /* menus, tooltips, toasts */
  --js-motion-enter: 225ms;    /* sheets/dialogs entering */
  --js-motion-leave: 195ms;    /* sheets/dialogs leaving */
  --js-motion-slow: 300ms;     /* sidebar collapse, view swaps */
  --js-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --js-ease-out: cubic-bezier(0, 0, 0.2, 1);    /* entering */
  --js-ease-in: cubic-bezier(0.4, 0, 1, 1);     /* leaving */

  color-scheme: light;
}

/* ---------- Dark ("Night") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --js-color-paper: #16141c;      /* Night */
    --js-color-sheet: #201e23;
    --js-color-field: #29272e;
    --js-color-ink: #f3eee6;
    --js-color-ink-2: #a69c90;
    --js-color-ink-3: #7d756c;
    --js-color-line: #353339;
    --js-color-line-strong: #45434c;
    --js-color-hover: rgba(243, 238, 230, 0.06);
    --js-color-pressed: rgba(243, 238, 230, 0.10);
    --js-color-scrim: rgba(12, 10, 16, 0.72);
    --js-color-purple-tint: #2a2438;
    --js-color-purple-tint-2: #231f2e;
    --js-color-accent: #d4c4f5;     /* guide: Tag purple lightens to #D4C4F5 on Night */
    --js-color-link: #d4c4f5;
    --js-color-on-accent: #16141c;
    --js-btn-primary-bg: #b39fd0;   /* Lavender, 7.6:1 with Night text */
    --js-btn-primary-bg-hover: #c4b3dd;
    --js-btn-primary-bg-active: #d4c4f5;
    --js-btn-primary-bg-disabled: #4a4259;
    --js-btn-primary-fg: #16141c;
    --js-btn-secondary-bg: rgba(243, 238, 230, 0.08);
    --js-btn-secondary-bg-hover: rgba(243, 238, 230, 0.12);
    --js-btn-secondary-bg-active: rgba(243, 238, 230, 0.16);
    --js-btn-tertiary-fg: #d4c4f5;
    --js-color-star: #d4c4f5;          /* 11.3:1 on Night */
    --js-color-selection: rgba(179, 159, 208, 0.38);
    --js-color-danger: #ff7a6e;        /* Night text on it 7.18:1 */
    --js-color-danger-hover: #ff948a;  /* Night text on it 8.56:1 */
    --js-color-danger-active: #ffada5; /* Night text on it 10.23:1 */
    --js-color-danger-text: #ff7a6e;   /* 7.18:1 on Night, 6.50:1 on #201E23, 5.80:1 on #29272E */
    --js-color-on-danger: #16141c;
    --js-btn-destructive-bg: #ff7a6e;
    --js-btn-destructive-bg-hover: #ff948a;
    --js-btn-destructive-bg-active: #ffada5;
    --js-btn-destructive-fg: #16141c;
    --js-input-border-focus: #b39fd0;
    --js-input-border-error: #ff7a6e;
    --js-color-error-text: #ff7a6e;
    --js-color-error-border: #ff7a6e;
    --js-color-destructive: #ff7a6e;
    --js-focus-ring: 0 0 0 1px #b39fd0, 0 0 0 4px rgba(179, 159, 208, 0.28);
    --js-focus-outline: 2px solid #b39fd0;
    --js-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --js-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.35), 0 8px 18px 4px rgba(0, 0, 0, 0.20);
    --js-shadow-3: 0 16px 50px rgba(0, 0, 0, 0.60), 0 4px 7px rgba(0, 0, 0, 0.08);
    color-scheme: dark;
  }
}

/* Explicit dark choice from Settings overrides the OS. Same values as above. */
:root[data-theme="dark"] {
  --js-color-paper: #16141c;      /* Night */
  --js-color-sheet: #201e23;
  --js-color-field: #29272e;
  --js-color-ink: #f3eee6;
  --js-color-ink-2: #a69c90;
  --js-color-ink-3: #7d756c;
  --js-color-line: #353339;
  --js-color-line-strong: #45434c;
  --js-color-hover: rgba(243, 238, 230, 0.06);
  --js-color-pressed: rgba(243, 238, 230, 0.10);
  --js-color-scrim: rgba(12, 10, 16, 0.72);
  --js-color-purple-tint: #2a2438;
  --js-color-purple-tint-2: #231f2e;
  --js-color-accent: #d4c4f5;     /* guide: Tag purple lightens to #D4C4F5 on Night */
  --js-color-link: #d4c4f5;
  --js-color-on-accent: #16141c;
  --js-btn-primary-bg: #b39fd0;   /* Lavender, 7.6:1 with Night text */
  --js-btn-primary-bg-hover: #c4b3dd;
  --js-btn-primary-bg-active: #d4c4f5;
  --js-btn-primary-bg-disabled: #4a4259;
  --js-btn-primary-fg: #16141c;
  --js-btn-secondary-bg: rgba(243, 238, 230, 0.08);
  --js-btn-secondary-bg-hover: rgba(243, 238, 230, 0.12);
  --js-btn-secondary-bg-active: rgba(243, 238, 230, 0.16);
  --js-btn-tertiary-fg: #d4c4f5;
  --js-color-star: #d4c4f5;          /* 11.3:1 on Night */
  --js-color-selection: rgba(179, 159, 208, 0.38);
  --js-color-danger: #ff7a6e;        /* Night text on it 7.18:1 */
  --js-color-danger-hover: #ff948a;  /* Night text on it 8.56:1 */
  --js-color-danger-active: #ffada5; /* Night text on it 10.23:1 */
  --js-color-danger-text: #ff7a6e;   /* 7.18:1 on Night, 6.50:1 on #201E23, 5.80:1 on #29272E */
  --js-color-on-danger: #16141c;
  --js-btn-destructive-bg: #ff7a6e;
  --js-btn-destructive-bg-hover: #ff948a;
  --js-btn-destructive-bg-active: #ffada5;
  --js-btn-destructive-fg: #16141c;
  --js-input-border-focus: #b39fd0;
  --js-input-border-error: #ff7a6e;
  --js-color-error-text: #ff7a6e;
  --js-color-error-border: #ff7a6e;
  --js-color-destructive: #ff7a6e;
  --js-focus-ring: 0 0 0 1px #b39fd0, 0 0 0 4px rgba(179, 159, 208, 0.28);
  --js-focus-outline: 2px solid #b39fd0;
  --js-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --js-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.35), 0 8px 18px 4px rgba(0, 0, 0, 0.20);
  --js-shadow-3: 0 16px 50px rgba(0, 0, 0, 0.60), 0 4px 7px rgba(0, 0, 0, 0.08);
  color-scheme: dark;
}

/* Reduced motion: keep color/opacity changes, drop movement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --js-motion-base: 0ms;
    --js-motion-enter: 0ms;
    --js-motion-leave: 0ms;
    --js-motion-slow: 0ms;
  }
}

/* ==========================================================================
   MONO THEME (EXPERIMENT, PREVIEW ONLY; Jimmy 6:07 PM Oct 26). Black-and-white composition-notebook look.
   One token layer: the purple roles map to ink/black and grays. Delete this block to go back to purple.
   Contrast: theme-mono/CONTRAST.md (all text pairs WCAG AA or better). No new origins, no new fonts.
   ========================================================================== */
:root {
  --js-color-purple: #1e1c1a;
  --js-color-purple-hover: #000000;
  --js-color-purple-active: #3a3632;
  --js-color-purple-disabled: #a8a29a;
  --js-color-purple-tint: #ece9e3;
  --js-color-purple-tint-2: #f3f1ec;
  --js-color-lavender: #cfc9c0;
  --js-color-star: #1e1c1a;
  --js-color-accent: #1e1c1a;
  --js-color-link: #1e1c1a;
  --js-color-on-accent: #ffffff;
  --js-color-selection: rgba(30, 28, 26, 0.16);
  --js-btn-primary-bg: #1e1c1a;
  --js-btn-primary-bg-hover: #000000;
  --js-btn-primary-bg-active: #3a3632;
  --js-btn-primary-bg-disabled: #a8a29a;
  --js-btn-primary-fg: #ffffff;
  --js-btn-tertiary-fg: #1e1c1a;
  --js-btn-tertiary-bg-hover: #f3f1ec;
  --js-focus-ring: 0 0 0 2px #f6f1e8, 0 0 0 4px #1e1c1a;
  --js-focus-outline: 2px solid #1e1c1a;
  --js-input-border-focus: #1e1c1a;
  --js-row-selected-bg: #ece9e3;
  --js-mono-spine: #0f0e0d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --js-color-paper: #141312;
    --js-color-sheet: #1e1c1b;
    --js-color-field: #282624;
    --js-color-ink: #edeae5;
    --js-color-ink-2: #ada69d;
    --js-color-ink-3: #7e776f;
    --js-color-line: #33302d;
    --js-color-line-strong: #47433f;
    --js-color-hover: rgba(237, 234, 229, 0.06);
    --js-color-pressed: rgba(237, 234, 229, 0.1);
    --js-color-scrim: rgba(8, 8, 7, 0.72);
    --js-btn-secondary-bg: rgba(237, 234, 229, 0.08);
    --js-btn-secondary-bg-hover: rgba(237, 234, 229, 0.12);
    --js-btn-secondary-bg-active: rgba(237, 234, 229, 0.16);
    --js-color-purple: #edeae5;
    --js-color-purple-hover: #ffffff;
    --js-color-purple-active: #d5d0c9;
    --js-color-purple-disabled: #4a4743;
    --js-color-purple-tint: #2b2927;
    --js-color-purple-tint-2: #232120;
    --js-color-lavender: #5a5651;
    --js-color-star: #edeae5;
    --js-color-accent: #edeae5;
    --js-color-link: #edeae5;
    --js-color-on-accent: #141312;
    --js-color-selection: rgba(237, 234, 229, 0.24);
    --js-btn-primary-bg: #edeae5;
    --js-btn-primary-bg-hover: #ffffff;
    --js-btn-primary-bg-active: #d5d0c9;
    --js-btn-primary-bg-disabled: #4a4743;
    --js-btn-primary-fg: #141312;
    --js-btn-tertiary-fg: #edeae5;
    --js-btn-tertiary-bg-hover: #232120;
    --js-focus-ring: 0 0 0 2px #141312, 0 0 0 4px #edeae5;
    --js-focus-outline: 2px solid #edeae5;
    --js-input-border-focus: #edeae5;
    --js-row-selected-bg: #2b2927;
    --js-mono-spine: #000000;
  }
}
:root[data-theme="dark"] {
  --js-color-paper: #141312;
  --js-color-sheet: #1e1c1b;
  --js-color-field: #282624;
  --js-color-ink: #edeae5;
  --js-color-ink-2: #ada69d;
  --js-color-ink-3: #7e776f;
  --js-color-line: #33302d;
  --js-color-line-strong: #47433f;
  --js-color-hover: rgba(237, 234, 229, 0.06);
  --js-color-pressed: rgba(237, 234, 229, 0.1);
  --js-color-scrim: rgba(8, 8, 7, 0.72);
  --js-btn-secondary-bg: rgba(237, 234, 229, 0.08);
  --js-btn-secondary-bg-hover: rgba(237, 234, 229, 0.12);
  --js-btn-secondary-bg-active: rgba(237, 234, 229, 0.16);
  --js-color-purple: #edeae5;
  --js-color-purple-hover: #ffffff;
  --js-color-purple-active: #d5d0c9;
  --js-color-purple-disabled: #4a4743;
  --js-color-purple-tint: #2b2927;
  --js-color-purple-tint-2: #232120;
  --js-color-lavender: #5a5651;
  --js-color-star: #edeae5;
  --js-color-accent: #edeae5;
  --js-color-link: #edeae5;
  --js-color-on-accent: #141312;
  --js-color-selection: rgba(237, 234, 229, 0.24);
  --js-btn-primary-bg: #edeae5;
  --js-btn-primary-bg-hover: #ffffff;
  --js-btn-primary-bg-active: #d5d0c9;
  --js-btn-primary-bg-disabled: #4a4743;
  --js-btn-primary-fg: #141312;
  --js-btn-tertiary-fg: #edeae5;
  --js-btn-tertiary-bg-hover: #232120;
  --js-focus-ring: 0 0 0 2px #141312, 0 0 0 4px #edeae5;
  --js-focus-outline: 2px solid #edeae5;
  --js-input-border-focus: #edeae5;
  --js-row-selected-bg: #2b2927;
  --js-mono-spine: #000000;
}

/* ==========================================================================
   MONO + RULED (EXPERIMENT, PREVIEW ONLY; Jimmy 6:22 PM Oct 26). Sits on top of the MONO layer.
   Notebook-rule blue for dividers, a thin red margin line, red focus ring (>=3:1 both modes). Delete this block to go back to plain mono.
   ========================================================================== */
:root {
  --js-rule: #b9cfe6;
  --js-rule-strong: #9dbbdc;
  --js-margin: #e4908b;
  --js-rule-paper: rgba(110, 155, 205, 0.16);
  --js-focus-color: #b8322a;
  --js-focus-ring: 0 0 0 2px var(--js-color-paper), 0 0 0 4px #b8322a;
  --js-focus-outline: 2px solid #b8322a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --js-rule: #2e3d50;
    --js-rule-strong: #3b4f68;
    --js-margin: #7c3f3a;
    --js-rule-paper: rgba(120, 160, 210, 0.08);
    --js-focus-color: #e8796f;
    --js-focus-ring: 0 0 0 2px var(--js-color-paper), 0 0 0 4px #e8796f;
    --js-focus-outline: 2px solid #e8796f;
  }
}
:root[data-theme="dark"] {
  --js-rule: #2e3d50;
  --js-rule-strong: #3b4f68;
  --js-margin: #7c3f3a;
  --js-rule-paper: rgba(120, 160, 210, 0.08);
  --js-focus-color: #e8796f;
  --js-focus-ring: 0 0 0 2px var(--js-color-paper), 0 0 0 4px #e8796f;
  --js-focus-outline: 2px solid #e8796f;
}

/* ==========================================================================
   SOFT INK BUTTONS (EXPERIMENT, PREVIEW ONLY; Jimmy 6:42 PM Oct 26, Sloan's spec): light-mode primary buttons use the
   same ink as the logo (#36312D) instead of near-black. Hover and pressed #2A2622. White label 12.85:1.
   Body text, links and dark mode are unchanged (the dark blocks above win on specificity).
   ========================================================================== */
:root {
  --js-ink-solid: #36312d;
  --js-ink-solid-hover: #2a2622;
  --js-btn-primary-bg: var(--js-ink-solid);
  --js-btn-primary-bg-hover: var(--js-ink-solid-hover);
  --js-btn-primary-bg-active: var(--js-ink-solid-hover);
}