/* Docket type — all three families load from the Google Fonts CDN.
   Bricolage Grotesque: wordmark + display. Instrument Sans: UI. Martian Mono: micro labels.
   No brand binaries were supplied; replace with local @font-face rules when self-hosting. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400&family=Martian+Mono:wght@300;400;500&display=swap");
:root{
/* ============ ink: type and structure ============ */
--ink-950:#161412;
--ink-900:#1F1D1B;
--ink-800:#2B2825;
--ink-700:#3D3934;
--ink-600:#524C46;
--ink-500:#6B645C;
--ink-400:#8C847A;
--ink-300:#ABA298;
--ink-200:#C7BFB4;

/* ============ paper: one continuous light surface ============ */
--paper-0:#FFFFFF;
--paper-50:#FCFCFA;
--paper-100:#F7F6F2;
--paper-200:#F1F0EB;
--paper-300:#E7E5DE;
--paper-400:#D8D5CC;
--paper-500:#B9B4A9;

/* ============ marigold: the one accent ============ */
--marigold-100:#FBEED4;
--marigold-200:#F6DCA8;
--marigold-300:#EFC470;
--marigold-400:#E7AC42;
--marigold-500:#DA9520;
--marigold-600:#B47714;
--marigold-700:#8A5A0D;

/* ============ signals ============ */
--moss-100:#E2EDD4;
--moss-500:#6F9450;
--moss-600:#557139;
--rust-100:#F8E2D8;
--rust-500:#C05B39;
--rust-600:#9A4423;
--crimson-100:#F8DDDE;
--crimson-500:#BC4348;
--crimson-600:#96323A;

/* ============ space hues: one per space, used nowhere else ============ */
--space-azure:#3E7BA8;
--space-lilac:#7A5CAE;
--space-clay:#B96334;
--space-moss:#6A8F43;
--space-rose:#B24A69;
--space-teal:#2E857E;
--space-sand:#A88A2A;
--space-slate:#5C6B7D;

/* ================= surfaces ================= */
--canvas:var(--paper-200);
--canvas-deep:var(--paper-300);
--chrome:var(--paper-200);
--chrome-raised:var(--paper-100);
--column-bg:transparent;
--column-rule:rgba(31,29,27,.10);
--surface:var(--paper-50);
--surface-bright:var(--paper-0);
--surface-sunken:var(--paper-100);
--surface-hover:var(--paper-100);
--surface-active:var(--paper-300);
--surface-selected:var(--marigold-100);

/* hover/active washes — same values whether a component says onInk or not,
   because Docket is one continuous light surface */
--ink-hover:rgba(31,29,27,.05);
--ink-active:rgba(31,29,27,.09);
--border-on-ink:rgba(31,29,27,.10);
--border-on-ink-strong:rgba(31,29,27,.20);

/* ================= text ================= */
--text-primary:var(--ink-900);
--text-secondary:var(--ink-600);
--text-tertiary:var(--ink-500);
--text-quiet:var(--ink-400);
--text-inverse:var(--paper-50);
--text-brand:var(--marigold-700);
--text-link:var(--marigold-700);
--text-link-hover:var(--ink-900);

--on-ink-primary:var(--ink-900);
--on-ink-secondary:var(--ink-600);
--on-ink-tertiary:var(--ink-500);
--on-ink-quiet:var(--ink-400);

--border-hairline:rgba(31,29,27,.09);
--border-default:rgba(31,29,27,.15);
--border-strong:rgba(31,29,27,.26);
--border-focus:var(--marigold-500);

--accent:var(--marigold-500);
--accent-hover:var(--marigold-400);
--accent-press:var(--marigold-600);
--accent-ink:var(--ink-950);
--accent-text:var(--marigold-700);
--accent-quiet-bg:var(--marigold-100);
--accent-quiet-border:rgba(218,149,32,.36);

/* coarse stage — carried by columns and groups; a chip is the exception */
--stage-not-started-fg:var(--ink-500);
--stage-not-started-bg:var(--paper-300);
--stage-in-progress-fg:var(--marigold-700);
--stage-in-progress-bg:var(--marigold-100);
--stage-done-fg:var(--moss-600);
--stage-done-bg:var(--moss-100);
--stage-on-ink-not-started:var(--ink-400);
--stage-on-ink-in-progress:var(--marigold-600);
--stage-on-ink-done:var(--moss-500);

/* dependency: informational, never blocking */
--dependency-fg:var(--rust-600);
--dependency-bg:var(--rust-100);
--dependency-edge:var(--rust-500);

/* privacy: texture, not colour */
--private-fg:var(--ink-600);
--private-bg:var(--paper-300);
--private-hatch:rgba(31,29,27,.11);
--private-on-ink-fg:var(--ink-600);
--private-on-ink-bg:var(--paper-300);
--private-on-ink-hatch:rgba(31,29,27,.11);

--danger-fg:var(--crimson-600);
--danger-bg:var(--crimson-100);
--unread-dot:var(--marigold-500);
--acknowledge-dot:var(--rust-500);

--label-bar-width:16px;
--label-bar-height:3px;
--overlay-scrim:rgba(31,29,27,.30);
--drawer-scrim:rgba(31,29,27,.16);
}
:root{
--font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
--font-ui:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:800;

--size-display-1:44px;
--size-display-2:30px;
--size-title-1:22px;
--size-title-2:17px;
--size-title-3:15px;
--size-body:14px;
--size-card-title:15px;
--size-small:13px;
--size-micro:11.5px;
--size-mono-id:10.5px;
--size-mono-micro:9.5px;

--lh-display:1.02; /* @kind other */
--lh-title:1.2; /* @kind other */
--lh-body:1.55; /* @kind other */
--lh-tight:1.3; /* @kind other */

--track-display:-0.03em;
--track-title:-0.016em;
--track-body:-0.006em;
--track-caps:0.13em;
--track-mono:0.02em;

--text-display:var(--weight-black) var(--size-display-1)/var(--lh-display) var(--font-display);
--text-wordmark:var(--weight-black) 22px/1 var(--font-display);
--text-card-title:var(--weight-medium) var(--size-card-title)/1.32 var(--font-ui);
--text-board-title:var(--weight-semibold) var(--size-title-2)/var(--lh-title) var(--font-display);
--text-section:var(--weight-semibold) var(--size-small)/1.3 var(--font-ui);
--text-meta:var(--weight-regular) var(--size-micro)/1.35 var(--font-ui);
--text-ref-id:var(--weight-regular) var(--size-mono-id)/1 var(--font-mono);
--text-eyebrow:var(--weight-medium) var(--size-mono-micro)/1 var(--font-mono);
}
:root{
--space-0:0;
--space-1:2px;
--space-2:4px;
--space-3:6px;
--space-4:8px;
--space-5:10px;
--space-6:12px;
--space-7:16px;
--space-8:20px;
--space-9:24px;
--space-10:32px;
--space-11:40px;
--space-12:56px;

/* layout constants — fixed chrome, everything else flows */
--nav-width:236px;
--nav-width-collapsed:52px;
--suite-header-height:44px;
--board-header-height:56px;
--panel-width:320px;
--drawer-width:400px;
--column-width:272px;
--column-gap:12px;
--card-detail-width:940px;
--card-face-padding:10px;
--control-height:28px;
--control-height-lg:34px;
--gutter:16px;
}
:root{
/* One radius language. Every surface in Docket is rounded the same way. */
--radius-sharp:3px;
--radius-control:8px;
--radius-card:10px;
--radius-panel:12px;
--radius-pill:999px;
/* Legacy aliases — kept so older call sites stay consistent. Both are plain radii now:
   the asymmetric "tab" corner was removed because it read as a rendering fault. */
--radius-docket-tab:10px;
--radius-docket-tab-lg:12px;
--hairline:1px;
}
:root{
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--border-hairline);
/* Cards are separated by a hairline plus the faintest lift. */
--shadow-card:0 1px 1px rgba(31,29,27,.04),0 0 0 1px rgba(31,29,27,.07);
--shadow-card-hover:0 2px 5px -1px rgba(31,29,27,.10),0 0 0 1px rgba(31,29,27,.11);
--shadow-drag:0 14px 30px -10px rgba(31,29,27,.28),0 0 0 1px rgba(31,29,27,.10);
--shadow-panel:0 0 0 1px var(--border-hairline);
--shadow-drawer:-20px 0 50px -22px rgba(31,29,27,.24);
--shadow-popover:0 24px 60px -22px rgba(31,29,27,.32),0 0 0 1px rgba(31,29,27,.10);
--shadow-focus:0 0 0 2px var(--canvas),0 0 0 4px var(--marigold-500);
--shadow-focus-paper:0 0 0 2px var(--surface),0 0 0 4px var(--marigold-500);
--inset-well:inset 0 1px 0 rgba(31,29,27,.04);
}
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:130ms; /* @kind other */
--dur-base:190ms; /* @kind other */
--dur-drawer:260ms; /* @kind other */
--dur-collapse:220ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.6,.25,1); /* @kind other */
--ease-out:cubic-bezier(.16,.84,.34,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,.9,.4); /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
--transition-surface:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-drawer:0ms; /* @kind other */
--dur-collapse:0ms; /* @kind other */}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-ui);letter-spacing:var(--track-body);color:var(--text-primary);background:var(--canvas);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 34%,transparent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:color-mix(in oklab,var(--text-link-hover) 55%,transparent)}
button{font:inherit;letter-spacing:inherit}
::selection{background:var(--marigold-200)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.docket-scroll::-webkit-scrollbar,.paper-scroll::-webkit-scrollbar{width:10px;height:10px}
.docket-scroll::-webkit-scrollbar-thumb,.paper-scroll::-webkit-scrollbar-thumb{background:var(--paper-400);border-radius:var(--radius-pill);border:3px solid transparent;background-clip:padding-box}
.docket-scroll::-webkit-scrollbar-track,.paper-scroll::-webkit-scrollbar-track{background:transparent}
/* ============================================================
   Modes and accent themes.

   Two independent axes, set as attributes:

     data-mode="light" | "dark"      surface polarity (default: light)
     data-theme="marigold" | "azure" | "teal" | "moss" | "lilac" | "clay"
                                     which hue is the accent (default: marigold)

   Normally both live on <html>, but either may be scoped to any subtree —
   a dark popover on a light page, a themed preview panel — because each
   block below redeclares the whole semantic layer that depends on the
   ramps it changes, not just the ramps. Custom properties are substituted
   where they are declared, so an alias left on :root would keep its light
   value inside a scoped subtree. That is the reason for the repetition
   here; it is not redundant.

   Components read semantic tokens only, and the two rules the ramps obey
   never change: paper is always a background, ink is always type and
   structure.

   A theme replaces the values of the marigold ramp rather than adding a
   parallel one, so raw --marigold-400 usages theme too. Space hues are
   identity, not accent: they shift for contrast in dark mode and are
   never touched by a theme.

   There is no data-mode="auto" in CSS. docket-theme.js resolves the
   system preference and writes a concrete mode, so the attribute always
   states what is on screen.
   ============================================================ */

/* ============ dark mode ============ */
[data-mode="dark"]{
color-scheme:dark;

/* --- ramps --- */

/* paper splits in dark: 0–200 are surfaces, 300–500 are marks
   (progress tracks, switch tracks, scrollbar thumbs, thread dots),
   which have to sit lighter than the surface to stay visible. */
--paper-0:#2B2722;
--paper-50:#221F1B;
--paper-100:#1B1815;
--paper-200:#151310;
--paper-300:#322D27;
--paper-400:#4A443C;
--paper-500:#5E574E;

/* ink inverts to a warm off-white; the numbering keeps its meaning
   (900 primary type, 400 quiet) so no component changes. */
--ink-950:#FBFAF7;
--ink-900:#F0EDE6;
--ink-800:#E4E0D8;
--ink-700:#D2CCC2;
--ink-600:#B6AFA3;
--ink-500:#978F84;
--ink-400:#7E7669;
--ink-300:#6A6357;
--ink-200:#565046;

/* signal tints flip: the -100 steps become dark washes, the -600/-700
   steps become the readable foreground. */
--marigold-100:#3B2C12;
--marigold-200:#573F16;
--marigold-600:#C48A2A;
--marigold-700:#EFC470;
--moss-100:#22301A;
--moss-600:#A8C489;
--rust-100:#3A241B;
--rust-600:#DE9375;
--crimson-100:#3A1E20;
--crimson-600:#E9868C;

/* space hues, lightened for a dark field. Same eight, same order. */
--space-azure:#5C9AC7;
--space-lilac:#9C7DD0;
--space-clay:#D8834F;
--space-moss:#8AB162;
--space-rose:#D06A88;
--space-teal:#48A69E;
--space-sand:#C9A845;
--space-slate:#7C8B9D;

/* --- semantic layer, restated so a scoped subtree flips --- */
--canvas:var(--paper-200);
--chrome:var(--paper-200);
--chrome-raised:var(--paper-100);
--surface:var(--paper-50);
--surface-bright:var(--paper-0);
--surface-sunken:var(--paper-100);
--surface-hover:var(--paper-100);
--surface-active:var(--paper-300);
--text-primary:var(--ink-900);
--text-secondary:var(--ink-600);
--text-tertiary:var(--ink-500);
--text-quiet:var(--ink-400);
--text-inverse:var(--paper-50);
--text-brand:var(--marigold-700);
--text-link:var(--marigold-700);
--text-link-hover:var(--ink-900);
--on-ink-primary:var(--ink-900);
--on-ink-secondary:var(--ink-600);
--on-ink-tertiary:var(--ink-500);
--on-ink-quiet:var(--ink-400);
--border-focus:var(--marigold-500);
--accent:var(--marigold-500);
--accent-hover:var(--marigold-400);
--accent-press:var(--marigold-600);
--accent-text:var(--marigold-700);
--accent-quiet-bg:var(--marigold-100);
--accent-quiet-border:color-mix(in oklab,var(--marigold-500) 36%,transparent);
--stage-not-started-fg:var(--ink-500);
--stage-not-started-bg:var(--paper-300);
--stage-in-progress-fg:var(--marigold-700);
--stage-in-progress-bg:var(--marigold-100);
--stage-done-fg:var(--moss-600);
--stage-done-bg:var(--moss-100);
--stage-on-ink-not-started:var(--ink-400);
--stage-on-ink-in-progress:var(--marigold-600);
--stage-on-ink-done:var(--moss-600);
--dependency-fg:var(--rust-600);
--dependency-bg:var(--rust-100);
--dependency-edge:var(--rust-500);
--private-fg:var(--ink-600);
--private-bg:var(--paper-300);
--private-on-ink-fg:var(--ink-600);
--private-on-ink-bg:var(--paper-300);
--danger-fg:var(--crimson-600);
--danger-bg:var(--crimson-100);
--unread-dot:var(--marigold-500);
--acknowledge-dot:var(--rust-500);
--shadow-hairline:0 0 0 1px var(--border-hairline);
--shadow-panel:0 0 0 1px var(--border-hairline);
--shadow-focus:0 0 0 2px var(--canvas),0 0 0 4px var(--marigold-500);
--shadow-focus-paper:0 0 0 2px var(--surface),0 0 0 4px var(--marigold-500);

/* --- values that are dark-specific rather than a remap --- */
--canvas-deep:#100E0C;
--surface-selected:rgba(218,149,32,.15);
--column-rule:rgba(240,237,230,.10);

--ink-hover:rgba(240,237,230,.05);
--ink-active:rgba(240,237,230,.10);
--border-on-ink:rgba(240,237,230,.11);
--border-on-ink-strong:rgba(240,237,230,.22);
--border-hairline:rgba(240,237,230,.10);
--border-default:rgba(240,237,230,.16);
--border-strong:rgba(240,237,230,.28);

/* text on an accent fill stays dark — accent 500 is a light hue in both modes */
--accent-ink:#1A1714;

--private-hatch:rgba(240,237,230,.10);
--private-on-ink-hatch:rgba(240,237,230,.10);

--overlay-scrim:rgba(8,7,6,.58);
--drawer-scrim:rgba(8,7,6,.36);

/* elevation is carried by black plus a light ring, not by tint */
--shadow-card:0 1px 1px rgba(0,0,0,.30),0 0 0 1px rgba(240,237,230,.07);
--shadow-card-hover:0 2px 6px -1px rgba(0,0,0,.42),0 0 0 1px rgba(240,237,230,.13);
--shadow-drag:0 14px 30px -10px rgba(0,0,0,.66),0 0 0 1px rgba(240,237,230,.14);
--shadow-drawer:-20px 0 50px -22px rgba(0,0,0,.62);
--shadow-popover:0 24px 60px -22px rgba(0,0,0,.70),0 0 0 1px rgba(240,237,230,.12);
--inset-well:inset 0 1px 0 rgba(0,0,0,.24);
}

/* a scoped dark subtree has to paint its own field and type */
[data-mode="dark"]:not(html):not(body){background:var(--canvas);color:var(--text-primary)}

/* ============ accent themes ============ */
[data-theme="marigold"]{--accent-hue:75;/* @kind other */}
[data-theme="clay"]{--accent-hue:42;/* @kind other */}
[data-theme="azure"]{--accent-hue:248;/* @kind other */}
[data-theme="teal"]{--accent-hue:192;/* @kind other */}
[data-theme="moss"]{--accent-hue:142;/* @kind other */}
[data-theme="lilac"]{--accent-hue:302;/* @kind other */}

/* one ramp recipe, one hue per theme: every accent sits at the same
   lightness and chroma as marigold, so nothing else has to be retuned. */
[data-theme]{
--marigold-100:oklch(.945 .042 var(--accent-hue));
--marigold-200:oklch(.885 .082 var(--accent-hue));
--marigold-300:oklch(.825 .105 var(--accent-hue));
--marigold-400:oklch(.765 .125 var(--accent-hue));
--marigold-500:oklch(.700 .135 var(--accent-hue));
--marigold-600:oklch(.590 .120 var(--accent-hue));
--marigold-700:oklch(.480 .105 var(--accent-hue));

/* the accent-dependent aliases, restated for the same scoping reason */
--accent:var(--marigold-500);
--accent-hover:var(--marigold-400);
--accent-press:var(--marigold-600);
--accent-text:var(--marigold-700);
--accent-quiet-bg:var(--marigold-100);
--accent-quiet-border:color-mix(in oklab,var(--marigold-500) 36%,transparent);
--text-brand:var(--marigold-700);
--text-link:var(--marigold-700);
--border-focus:var(--marigold-500);
--unread-dot:var(--marigold-500);
--stage-in-progress-fg:var(--marigold-700);
--stage-in-progress-bg:var(--marigold-100);
--stage-on-ink-in-progress:var(--marigold-600);
--shadow-focus:0 0 0 2px var(--canvas),0 0 0 4px var(--marigold-500);
--shadow-focus-paper:0 0 0 2px var(--surface),0 0 0 4px var(--marigold-500);
--surface-selected:var(--marigold-100);

/* the theme's one structural move: chrome takes a 4% wash of the accent,
   so nav and header read as themed without gaining contrast */
--chrome:color-mix(in oklab,var(--paper-200) 96%,var(--marigold-500));
--chrome-raised:color-mix(in oklab,var(--paper-100) 96%,var(--marigold-500));
}

[data-mode="dark"][data-theme]{
--marigold-100:oklch(.30 .050 var(--accent-hue));
--marigold-200:oklch(.38 .070 var(--accent-hue));
--marigold-300:oklch(.620 .110 var(--accent-hue));
--marigold-400:oklch(.760 .128 var(--accent-hue));
--marigold-500:oklch(.700 .135 var(--accent-hue));
--marigold-600:oklch(.600 .120 var(--accent-hue));
--marigold-700:oklch(.825 .105 var(--accent-hue));
--chrome:color-mix(in oklab,var(--paper-200) 93%,var(--marigold-500));
--chrome-raised:color-mix(in oklab,var(--paper-100) 93%,var(--marigold-500));
--surface-selected:color-mix(in oklab,var(--marigold-500) 15%,transparent);
}