/* desk.css: the desk design system, flattened for a static site with no build step. Copied 2026-09-25 from /Users/Shared/Projects/system/design-systems/desk (tokens/tokens.css, styles/base.css, styles/components.css, in that order). Edit the package, then re-copy; do not edit here. */ /* ============================================================ desk-design-system — tokens Contemporary-Japanese design language: warm washi paper (oklch hue 60), graded hairlines, zero radius, no shadows. Exactly two accents: vermilion = a human must act / active; indigo = confirmed / settled. Values extracted verbatim from the desk app skin — restyle values here, never rename. Dark mechanism: the source skin switches on the OS media query only (with a color-scheme flip). This package keeps that behavior and adds a data-theme override: the media block is guarded with :root:not([data-theme=light]) and the same overrides are duplicated under :root[data-theme=dark], so a host can force either theme via . ============================================================ */ :root{ color-scheme:light; --rail:25%; /* JS-driven pane width — keep */ --bg:#f6f4f1; /* canvas */ --panel:#fbfaf8; /* cards / header */ --rail-bg:#f9f7f5; /* side rails */ --text:oklch(0.26 0.008 60); /* warm ink */ --meta:oklch(0.45 0.008 60); /* mono metadata */ --muted:oklch(0.51 0.008 60); --faint:oklch(0.54 0.008 60); --line:oklch(0.86 0.006 60); /* structural hairline */ --line-soft:oklch(0.895 0.006 60); /* intra-panel hairline */ --line-faint:oklch(0.91 0.006 60); /* list-row separators */ --accent:oklch(0.49 0.13 32); /* vermilion — FILLS */ --accent-ink:oklch(0.49 0.13 32); /* vermilion — TEXT + thin edges */ --ok-ink:oklch(0.48 0.09 250); --accent-hov:oklch(0.45 0.13 32); --accent-border:oklch(0.78 0.1 32); --accent-tint:oklch(0.96 0.02 32); --warn:oklch(0.48 0.13 32); /* warning voice = deep vermilion */ --ok:oklch(0.48 0.09 250); /* indigo: confirmed / settled */ --ok-border:oklch(0.86 0.03 250); --ok-tint:oklch(0.97 0.012 250); --client-b:oklch(0.955 0.012 60); /* client voice: warm wash */ --team-b:oklch(0.955 0.006 60); /* retired wash — near-neutral; team voice = edge, not fill */ --sel-tint:oklch(0.97 0.012 60); /* selected-row warm overlay */ --dim:oklch(0.94 0.008 60); --on-accent:#fbfaf8; --foot-bg:oklch(0.26 0.008 60); /* inverted ink band */ --foot-text:oklch(0.93 0.004 60); --foot-muted:oklch(0.72 0.008 60); --foot-line:oklch(0.38 0.008 60); --font-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif; --font-sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; /* ---- type, spacing and radius scales (2026-09-23) ---- Type: nine steps, raised to the estate floors on the owner's ruling (html-interface CHECKS.md): label steps at 11.5px or more, body steps at 17px or more. A step that serves any body element is a body step. Labels moved +3px and body +5px, so the order and the gaps between steps hold; the wordmark keeps its ratio to the page body. Leading is unitless and tracking is in em, so both follow the size in proportion. Spacing: the smallest set that holds every margin, padding and gap within 2px and still renders every component on the same lines; --space-bleed is the Composer's host contract (a 0 26px pane). */ --type-announce:11.5px; /* label: draft · human sends, gated tag */ --type-eyebrow:12.5px; /* label: chips, pills, eyebrows, footer band */ --type-stamp:13px; /* label: verdict stamp line, outlook labels */ --type-meta:13.5px; /* label: mono metadata: sender, tenant, marker, evidence */ --type-note:17px; /* body: bullets, note field (verdict buttons ride it) */ --type-card:17.5px; /* body: card and row body (toggle, Ask ride it) */ --type-input:18px; /* body: composer input (file-chip remove rides it) */ --type-body:18.5px; /* body: page body, machine card */ --type-wordmark:24.5px; /* serif wordmark, 18/13.5 of the page body */ --leading-chip:1.4; --leading-row:1.45; --leading-card:1.55; --leading-body:1.6; --leading-read:1.7; --tracking-wordmark:0.005em; --tracking-marker:0.02em; --tracking-meta:0.03em; --tracking-label:0.05em; --tracking-chip:0.06em; --tracking-band:0.08em; --tracking-tenant:0.14em; --tracking-eyebrow:0.16em; /* mono uppercase eyebrows and announcements */ --space-hair:2px; /* insets on chips, tags, pills */ --space-close:7px; /* gaps, control padding, stack rhythm */ --space-pad:12px; /* card and row padding */ --space-wide:16px; /* card and row gutters, header run */ --space-band:20px; /* header and footer band gutters */ --space-bleed:26px; /* composer bleed = host pane padding */ --radius:0; /* zero radius, everywhere */ } @media (prefers-color-scheme: dark){ :root:not([data-theme=light]){ color-scheme:dark; --bg:oklch(0.21 0.008 60); --panel:oklch(0.245 0.008 60); --rail-bg:oklch(0.23 0.008 60); --text:oklch(0.93 0.004 60); --meta:oklch(0.78 0.008 60); --muted:oklch(0.71 0.008 60); --faint:oklch(0.66 0.008 60); --line:oklch(0.36 0.008 60); --line-soft:oklch(0.33 0.008 60); --line-faint:oklch(0.31 0.008 60); --accent:oklch(0.50 0.14 32); /* fills keep their weight in dark */ --accent-ink:oklch(0.74 0.11 32); /* only text/edges lighten */ --ok-ink:oklch(0.74 0.08 250); --accent-hov:oklch(0.56 0.14 32); --accent-border:oklch(0.5 0.1 32); --accent-tint:oklch(0.3 0.035 32); --warn:oklch(0.7 0.12 32); --ok:oklch(0.72 0.08 250); --ok-border:oklch(0.46 0.05 250); --ok-tint:oklch(0.29 0.025 250); --client-b:oklch(0.28 0.016 60); --team-b:oklch(0.27 0.006 60); --sel-tint:oklch(0.29 0.014 45); --dim:oklch(0.27 0.008 60); --on-accent:oklch(0.96 0.006 60); --foot-bg:oklch(0.30 0.012 55); --foot-text:oklch(0.85 0.006 60); --foot-muted:oklch(0.76 0.008 60); --foot-line:oklch(0.32 0.008 60); } } /* forced dark — identical values to the media block above; keep in sync */ :root[data-theme=dark]{ color-scheme:dark; --bg:oklch(0.21 0.008 60); --panel:oklch(0.245 0.008 60); --rail-bg:oklch(0.23 0.008 60); --text:oklch(0.93 0.004 60); --meta:oklch(0.78 0.008 60); --muted:oklch(0.71 0.008 60); --faint:oklch(0.66 0.008 60); --line:oklch(0.36 0.008 60); --line-soft:oklch(0.33 0.008 60); --line-faint:oklch(0.31 0.008 60); --accent:oklch(0.50 0.14 32); /* fills keep their weight in dark */ --accent-ink:oklch(0.74 0.11 32); /* only text/edges lighten */ --ok-ink:oklch(0.74 0.08 250); --accent-hov:oklch(0.56 0.14 32); --accent-border:oklch(0.5 0.1 32); --accent-tint:oklch(0.3 0.035 32); --warn:oklch(0.7 0.12 32); --ok:oklch(0.72 0.08 250); --ok-border:oklch(0.46 0.05 250); --ok-tint:oklch(0.29 0.025 250); --client-b:oklch(0.28 0.016 60); --team-b:oklch(0.27 0.006 60); --sel-tint:oklch(0.29 0.014 45); --dim:oklch(0.27 0.008 60); --on-accent:oklch(0.96 0.006 60); --foot-bg:oklch(0.30 0.012 55); --foot-text:oklch(0.85 0.006 60); --foot-muted:oklch(0.76 0.008 60); --foot-line:oklch(0.32 0.008 60); } /* ============================================================ desk-design-system — base The skin's ground layer: reset + typographic fundamentals, rewritten against the tokens. App-shell layout (flex column, 100vh, overflow) is the host's business and stays out. ============================================================ */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:var(--type-body); line-height:var(--leading-body); font-variant-emoji:text; /* symbols render as set type (line art), never color emoji */ } /* type-voice helpers — the skin's three voices */ .dds-serif{font-family:var(--font-serif)} /* wordmark / headline anchor */ .dds-sans{font-family:var(--font-sans)} /* body voice */ .dds-mono{font-family:var(--font-mono)} /* metadata voice */ /* ============================================================ desk-design-system — components Every component's CSS lives in THIS file, under the .dds- class prefix, faithful to the desk skin: warm washi surfaces, graded hairlines (--line / --line-soft / --line-faint), border-radius:0 everywhere, no shadows, mono uppercase metadata, exactly two accents (vermilion = a human must act; indigo = confirmed / settled). Component batches append below. ============================================================ */ /* == batch B == */ /* Content panels, ported from the desk app skin (index.html). Line references are into that file's