/* ============================================================================ TOKENS · jackfalltrades field manual — Benchmark/BM-Blue lineage ---------------------------------------------------------------------------- Same field-manual identity as the new Benchmark app: paper + ink, blueprint grid, IBM Plex (Serif italic display / Sans body / Mono labels), Special Elite stamps, hard hairline rules, blue accent. WHAT'S DIFFERENT HERE: five themes. The "sand" theme reproduces BM-Blue's exact cream skin; the others extend it (whiter daylight papers + two blueprint-dark inversions). Color tokens flip per theme; everything else is non-themed below. Set via . ========================================================================== */ :root { /* ---- Type (BM-Blue's IBM Plex system) --------------------------------- */ --f-display: 'IBM Plex Serif', Georgia, serif; --f-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace; --f-stamp: 'Special Elite', 'IBM Plex Mono', monospace; /* ---- Radius — crisp, document-like ------------------------------------ */ --r-xs: 2px; --r-sm: 3px; --r: 4px; --r-lg: 6px; --r-pill: 999px; /* ---- Layout ----------------------------------------------------------- */ --app-max: 540px; --tap: 52px; --nav-h: 66px; --bar-h: 56px; --sidebar-w: 236px; --gut: 18px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); /* ---- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(.2, .7, .2, 1); } /* ════════════════════════════════════════════════════════════════════════ SAND — BM-Blue exact: kraft field manual, cream paper + navy ink-blue ════════════════════════════════════════════════════════════════════════ */ [data-theme="sand"] { --paper:#f4ecd8; --paper-2:#ecdfba; --paper-3:#e3d4a8; --field:#fbf8ee; --field-2:#f5eede; --ink:#1a1814; --ink-2:#3f3a31; --ink-3:#6f6755; --ink-4:#9e947c; --rule:#bfb290; --rule-2:#d7ca9f; --rule-3:#e7daae; --edge:#1a1814; --blue:#13427a; --blue-2:#1f5e9e; --blue-3:#3a7ab8; --blue-wash:#dbe5ef; --red:#9a3322; --red-wash:#e7d4ce; --green:#3a6b2e; --green-wash:#dde7d3; --amber:#9a6b22; --amber-wash:#efe2c5; --stamp:rgba(154,51,34,.82); --grid-1:rgba(19,66,122,.07); --grid-2:rgba(19,66,122,.03); --paper-glow:rgba(255,255,255,.5); --paper-floor:rgba(120,90,40,.06); --grain:.5; --shadow:0 1px 0 rgba(26,24,20,.04), 0 12px 36px -18px rgba(26,24,20,.22); color-scheme: light; } /* ════════════════════════════════════════════════════════════════════════ LIGHTEST — white drafting sheet, blue grid ════════════════════════════════════════════════════════════════════════ */ [data-theme="lightest"] { --paper:#ffffff; --paper-2:#f3f5f8; --paper-3:#e9edf2; --field:#ffffff; --field-2:#f5f7fb; --ink:#0e1320; --ink-2:#384150; --ink-3:#69717e; --ink-4:#9aa1ad; --rule:#d9dee6; --rule-2:#e6eaf0; --rule-3:#eef1f5; --edge:#0e1320; --blue:#1f5fff; --blue-2:#1747c8; --blue-3:#5b8bff; --blue-wash:#e2ecff; --red:#c23a26; --red-wash:#f6dcd6; --green:#1f9d57; --green-wash:#d8f0e2; --amber:#b9791b; --amber-wash:#f6e8cf; --stamp:rgba(31,95,255,.66); --grid-1:rgba(31,95,255,.06); --grid-2:rgba(31,95,255,.028); --paper-glow:rgba(255,255,255,.6); --paper-floor:rgba(31,95,255,.03); --grain:0; --shadow:0 1px 0 rgba(13,16,22,.03), 0 14px 36px -20px rgba(13,16,22,.18); color-scheme: light; } /* ════════════════════════════════════════════════════════════════════════ LIGHTER — soft daylight paper ════════════════════════════════════════════════════════════════════════ */ [data-theme="lighter"] { --paper:#e9edf3; --paper-2:#e0e5ee; --paper-3:#d7dde8; --field:#ffffff; --field-2:#f3f6fa; --ink:#10141c; --ink-2:#3c4452; --ink-3:#69717e; --ink-4:#98a0ac; --rule:#ccd3de; --rule-2:#dde2ea; --rule-3:#e8ecf2; --edge:#10141c; --blue:#1f5fff; --blue-2:#1747c8; --blue-3:#5b8bff; --blue-wash:#e2ecff; --red:#c23a26; --red-wash:#f4dcd6; --green:#1f9d57; --green-wash:#d8f0e2; --amber:#b9791b; --amber-wash:#f3e5cd; --stamp:rgba(31,95,255,.66); --grid-1:rgba(31,95,255,.06); --grid-2:rgba(31,95,255,.03); --paper-glow:rgba(255,255,255,.5); --paper-floor:rgba(31,95,255,.04); --grain:0; --shadow:0 1px 0 rgba(16,20,28,.04), 0 14px 36px -20px rgba(16,20,28,.2); color-scheme: light; } /* ════════════════════════════════════════════════════════════════════════ DARK — slate blueprint ════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --paper:#0e1722; --paper-2:#16212f; --paper-3:#1f2b3a; --field:#18232f; --field-2:#202c3a; --ink:#e9eef6; --ink-2:#aab6c6; --ink-3:#76859a; --ink-4:#586679; --rule:#283544; --rule-2:#212d3b; --rule-3:#222d3b; --edge:#3a4858; --blue:#4d8dff; --blue-2:#6ba0ff; --blue-3:#3a6db8; --blue-wash:rgba(77,141,255,.16); --red:#e0715c; --red-wash:rgba(224,113,92,.16); --green:#45c483; --green-wash:rgba(69,196,131,.15); --amber:#e0a23c; --amber-wash:rgba(224,162,60,.15); --stamp:rgba(224,113,92,.8); --grid-1:rgba(120,170,255,.07); --grid-2:rgba(120,170,255,.035); --paper-glow:rgba(80,130,200,.1); --paper-floor:rgba(0,0,0,.25); --grain:.35; --shadow:0 1px 0 rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6); color-scheme: dark; } /* ════════════════════════════════════════════════════════════════════════ DARKEST — near-black bunker ════════════════════════════════════════════════════════════════════════ */ [data-theme="darkest"] { --paper:#06080c; --paper-2:#0c1117; --paper-3:#18202c; --field:#0d1219; --field-2:#161e29; --ink:#e8eef6; --ink-2:#99a6b7; --ink-3:#5f6d7e; --ink-4:#424e5e; --rule:#1c2533; --rule-2:#141b26; --rule-3:#1a2230; --edge:#2a3340; --blue:#5b9bff; --blue-2:#7db0ff; --blue-3:#3a6db8; --blue-wash:rgba(91,155,255,.15); --red:#e0715c; --red-wash:rgba(224,113,92,.15); --green:#45c483; --green-wash:rgba(69,196,131,.14); --amber:#e0a23c; --amber-wash:rgba(224,162,60,.14); --stamp:rgba(224,113,92,.8); --grid-1:rgba(110,150,220,.06); --grid-2:rgba(110,150,220,.03); --paper-glow:rgba(60,110,190,.08); --paper-floor:rgba(0,0,0,.4); --grain:.4; --shadow:0 1px 0 rgba(0,0,0,.5), 0 18px 44px -22px rgba(0,0,0,.7); color-scheme: dark; }