/* ========================================================================== TLB MilSim — theme, WARM INSTRUMENT variant ("Direction C") Drop-in replacement for tlb-theme.css. What differs from the original boxy theme: · radii go 2/3/4px → 4/8/10/12px, plus a 999px pill radius · borders warm up (#2A2723 → #2E2A24) and gain a subtler internal tier · raised surfaces gain a faint vertical gradient instead of a flat fill · one soft radial glow sits behind the page, top-left · rounded ends appear ONLY on statuses and tracks — data cells stay square Palette, type and every state colour are UNCHANGED. This is a shape and surface retheme, not a new direction. Usage: (or tlb-warm-light) body { background-image: var(--page-glow); } ========================================================================== */ [data-theme="tlb-warm"] { /* --- page surfaces -------------------------------------------------- */ --surface: #100F0D; /* very slightly warmer than the boxy #0E0D0C */ --surface-raised: #161412; /* flat fallback — prefer --surface-raised-grad */ --surface-overlay: #1D1B18; --surface-sunken: #0A0908; /* Faint top-to-bottom lift on cards. Use as background on .card/.strip. Deliberately weak — it reads as material, not as a gradient. */ --surface-raised-grad: linear-gradient(#16151200, #1614124D); --surface-header-grad: linear-gradient(#1A1815, #171512); /* One soft warm glow behind the page, top-left. The only "effect" allowed. */ --page-glow: radial-gradient(120% 80% at 12% 0%, #16140F 0%, #100F0D 58%); /* --- lines (warmer + one extra tier) -------------------------------- */ --border: #2E2A24; /* default hairline — warmer than #2A2723 */ --border-strong: #403A32; /* hover, focused, secondary button outline */ --border-subtle: #221F1B; /* card-internal dividers */ --border-hairline: #1C1A17; /* table/strip row rules — quietest tier */ /* --- text (unchanged) ----------------------------------------------- */ --text: #EDEAE4; /* 15.1:1 */ --text-body: #CFC9BE; /* 10.6:1 */ --text-muted: #9A9386; /* 6.1:1 */ --text-subtle: #6E6860; /* 3.4:1 — labels only, never prose */ --text-inverse: #17120A; /* --- accent (unchanged) --------------------------------------------- */ --accent: #F2A03D; --accent-hover: #FFB559; --accent-fg: #17120A; --accent-tint: #F2A03D14; --accent-line: #F2A03D3D; --accent-glow: #F2A03D26; /* NEW: soft halo under a primary button */ --link: #F2A03D; --link-hover: #FFB559; --link-visited: #D99A4E; --focus-ring: #F2A03D; --code-bg: #F2A03D12; --code-fg: #F0AE5F; --code-block-bg: #0A0908; --code-block-border: #262219; /* ====================================================================== STATE COLOURS — identical to the boxy theme. Do not retune these. Each is a triad: -fg (label), -bg (8–14% fill), -border (25–40%). ====================================================================== */ --state-locked-fg: #9A9386; --state-locked-bg: #9A938612; --state-locked-border: #9A938633; --state-public-fg: #8FB8C9; --state-public-bg: #8FB8C912; --state-public-border: #8FB8C933; --state-members-fg: #C79BD1; --state-members-bg: #C79BD112; --state-members-border: #C79BD133; --state-progress-fg: #E0B341; --state-progress-bg: #E0B34114; --state-progress-border: #E0B34133; --state-complete-fg: #7FA36B; --state-complete-bg: #7FA36B14; --state-complete-border: #7FA36B3D; --state-failed-fg: #D8695C; --state-failed-bg: #C8564A14; --state-failed-border: #C8564A40; --state-pending-fg: #C9A17A; --state-pending-bg: #C9A17A12; --state-pending-border: #C9A17A40; --state-draft-fg: #8A8378; --state-draft-bg: #8A837810; --state-draft-border: #8A83782E; --state-published-fg: #7FA36B; --state-published-bg: #7FA36B12; --state-published-border:#7FA36B2E; /* --- callout tones (unchanged) --------------------------------------- */ --tone-note-fg: #8FB8C9; --tone-note-bg: #8FB8C90F; --tone-note-border: #8FB8C936; --tone-tip-fg: #7FA36B; --tone-tip-bg: #7FA36B0F; --tone-tip-border: #7FA36B36; --tone-warning-fg: #E0B341; --tone-warning-bg: #E0B3410F; --tone-warning-border:#E0B34136; --tone-danger-fg: #D8695C; --tone-danger-bg: #C8564A0F; --tone-danger-border: #C8564A3D; /* --- transcluded content --------------------------------------------- */ --transclude-bg: #12151A; --transclude-border: #262B33; --transclude-label: #8FA6B8; /* --- progress segments ----------------------------------------------- */ --segment-empty: #2A2723; --segment-active: #F2A03D; --segment-done: #7FA36B; --hatch-a: #141210; --hatch-b: #100F0D; /* --- elevation -------------------------------------------------------- */ --shadow-raised: 0 1px 2px #00000047; --shadow-overlay: 0 18px 44px #000000B3; --shadow-accent: 0 2px 12px var(--accent-glow); --ring-focus-soft: 0 0 0 3px #F2A03D1F; /* inner glow on a focused field */ } [data-theme="tlb-warm-light"] { --surface: #F7F4EF; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --surface-sunken: #EFEBE3; --surface-raised-grad: linear-gradient(#FFFFFF, #FCFAF6); --surface-header-grad: linear-gradient(#FCFAF6, #F5F1EA); --page-glow: radial-gradient(120% 80% at 12% 0%, #FFFDF8 0%, #F7F4EF 58%); --border: #DFD9CE; --border-strong: #C4BCAE; --border-subtle: #EAE5DC; --border-hairline: #F0ECE5; --text: #1A1815; --text-body: #33302A; --text-muted: #6B655C; --text-subtle: #8C8579; --text-inverse: #FFFFFF; --accent: #A85C08; --accent-hover: #8C4C05; --accent-fg: #FFFFFF; --accent-tint: #A85C0812; --accent-line: #A85C083D; --accent-glow: #A85C081F; --link: #A85C08; --link-hover: #8C4C05; --link-visited: #8A5A2A; --focus-ring: #A85C08; --code-bg: #A85C080F; --code-fg: #8C4C05; --code-block-bg: #F1ECE3; --code-block-border: #DFD9CE; --state-locked-fg: #6B655C; --state-locked-bg: #6B655C0F; --state-locked-border: #6B655C33; --state-public-fg: #2A6480; --state-public-bg: #2A64800F; --state-public-border: #2A648033; --state-members-fg: #6E3F84; --state-members-bg: #6E3F840F; --state-members-border: #6E3F8433; --state-progress-fg: #8A6410; --state-progress-bg: #8A64100F; --state-progress-border: #8A641033; --state-complete-fg: #3F6B2E; --state-complete-bg: #3F6B2E0F; --state-complete-border: #3F6B2E33; --state-failed-fg: #A8352A; --state-failed-bg: #A8352A0F; --state-failed-border: #A8352A33; --state-pending-fg: #8A5A2A; --state-pending-bg: #8A5A2A0F; --state-pending-border: #8A5A2A38; --state-draft-fg: #6B655C; --state-draft-bg: #6B655C0D; --state-draft-border: #6B655C2A; --state-published-fg: #3F6B2E; --state-published-bg: #3F6B2E0D; --state-published-border:#3F6B2E2A; --tone-note-fg: #2A6480; --tone-note-bg: #2A64800D; --tone-note-border: #2A648033; --tone-tip-fg: #3F6B2E; --tone-tip-bg: #3F6B2E0D; --tone-tip-border: #3F6B2E33; --tone-warning-fg: #8A6410; --tone-warning-bg: #8A64100D; --tone-warning-border:#8A641033; --tone-danger-fg: #A8352A; --tone-danger-bg: #A8352A0D; --tone-danger-border: #A8352A33; --transclude-bg: #EEF1F5; --transclude-border: #D6DCE4; --transclude-label: #40607A; --segment-empty: #DFD9CE; --segment-active: #A85C08; --segment-done: #3F6B2E; --hatch-a: #EDE8E0; --hatch-b: #F4F0E9; --shadow-raised: 0 1px 2px #1A18150F; --shadow-overlay: 0 18px 44px #1A181524; --shadow-accent: 0 2px 12px var(--accent-glow); --ring-focus-soft: 0 0 0 3px #A85C081F; } /* ========================================================================== SHAPE + METRICS The radius scale is the whole point of this variant. Five steps, and the 999px pill is reserved for statuses and tracks only. ========================================================================== */ :root { --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --measure: 70ch; --leading-body: 1.75; --leading-tight:1.2; --tracking-label: 0.12em; /* --- radii ---------------------------------------------------------- */ --radius-xs: 4px; /* chips, tags, small tiles, inline code */ --radius-sm: 6px; /* nested elements inside a card */ --radius-md: 8px; /* buttons, inputs, signature boxes, media slots */ --radius-lg: 10px; /* cards, strips, callouts, code blocks */ --radius-xl: 12px; /* modals, screen frames, drawers */ --radius-pill: 999px; /* STATUS PILLS AND PROGRESS TRACKS ONLY */ --sidebar-w: 260px; --toc-w: 260px; --header-h: 56px; --focus-offset: 3px; /* was 2px — the softer shapes need the extra room */ }