/* VOID.SYS — editorial presets. Six recipes, one trigger each. Activate on : either class="preset-lux" or data-preset="lux". Link AFTER tokens.css. Fine-grained picks (accent/acid/bg/pair/radius) layer on top as inline --var overrides — the gallery console or your own JS sets them. Extracted from the TK_PRESETS map in VOID.SYS Editorial.html (single source of truth). */ /* ============ 01 · EDITORIAL LUXURY ============ Champagne paper, hairline rules, aged gold. Serif display at high contrast. Type: Cormorant Garamond + Georgia · load Google Font: Cormorant Garamond Alt accents: #8F6B21 #274035 #5E2A2E #1F2A44 #7A5230 · acids: #D9C58F #C9A96A #B7C4A9 #E4D3B8 Alt bgs: Champagne #F1EAE0/#FAF6EE · Ivory #F6F2E8/#FDFBF4 · Blush stone #EFE6DF/#F9F3EE · corners 0/2/6 */ :root.preset-lux, :root[data-preset="lux"] { --bg: #F1EAE0; --bg-deep: #E4DACA; --surface: #F6F1E8; --paper: #FAF6EE; --true-white: #FFFFFF; --ink: #241B12; --black: #241B12; --white: #FAF6EE; --accent: #8F6B21; --accent-2: #274035; --acid: #D9C58F; --gray: #DDD3C2; --ink-muted: #756552; --ink-faint: #A29179; --hairline: rgba(36,27,18,0.16); --hairline-strong: rgba(36,27,18,0.34); --border-thin: 1px solid var(--ink); --border-base: 1px solid var(--ink); --border-thick: 3px double var(--ink); --border-dash: 1px dashed var(--ink); --font-display: 'Cormorant Garamond', Georgia, serif; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-body: Georgia, 'Times New Roman', serif; --tk-radius: 0px; } /* ============ 02 · MINIMAL BRUTALISM ============ Raw white, pure black, signal red. Mono display, 3px borders, hard shadows. Type: JetBrains Mono + Arial Alt accents: #FF2E00 #0000E6 #FF00A8 #00A651 #000000 · acids: #FFE600 #00FF66 #FF7BF3 #66E5FF Alt bgs: Raw white #FFF/#FFF · Concrete #E8E8E8/#F4F4F4 · Gallery grey #F2F2F2/#FFF · corners 0/4/10 */ :root.preset-brut, :root[data-preset="brut"] { --bg: #FFFFFF; --bg-deep: #EDEDED; --surface: #FFFFFF; --paper: #FFFFFF; --true-white: #FFFFFF; --ink: #000000; --black: #000000; --white: #FFFFFF; --accent: #FF2E00; --accent-2: #0000E6; --acid: #FFE600; --gray: #E3E3E3; --ink-muted: #4C4C4C; --ink-faint: #8C8C8C; --hairline: rgba(0,0,0,0.2); --hairline-strong: rgba(0,0,0,0.5); --border-thin: 2px solid var(--ink); --border-base: 3px solid var(--ink); --border-thick: 6px solid var(--ink); --border-dash: 3px dashed var(--ink); --font-display: 'JetBrains Mono', 'Courier New', monospace; --font-body: Arial, Helvetica, sans-serif; --tk-radius: 0px; } /* ============ 03 · BROADSHEET ============ Newsprint, oxblood, ledger blue. Playfair headlines over Georgia body. Type: Playfair Display + Georgia · load Google Font: Playfair Display Alt accents: #87201B #1F3D66 #2E5339 #8C6A1F #3B3B3B · acids: #D9CDAF #C9B98C #B4C4B0 #D6B8B0 Alt bgs: Newsprint #EFEAE0/#F7F3EA · Aged stock #EAE2D0/#F3EDDD · Cold press #ECECE4/#F6F6F0 · corners 0/2/4 */ :root.preset-broad, :root[data-preset="broad"] { --bg: #EFEAE0; --bg-deep: #E2DCCC; --surface: #F4F0E7; --paper: #F7F3EA; --true-white: #FFFDF6; --ink: #1C1710; --black: #1C1710; --white: #F7F3EA; --accent: #87201B; --accent-2: #1F3D66; --acid: #D9CDAF; --gray: #DCD5C6; --ink-muted: #5F574A; --ink-faint: #97907F; --hairline: rgba(28,23,16,0.22); --hairline-strong: rgba(28,23,16,0.5); --border-thin: 1px solid var(--ink); --border-base: 1px solid var(--ink); --border-thick: 4px double var(--ink); --border-dash: 1px dashed var(--ink); --font-display: 'Playfair Display', 'Times New Roman', serif; --font-serif: 'Playfair Display', 'Times New Roman', serif; --font-body: Georgia, 'Times New Roman', serif; --tk-radius: 0px; } /* ============ 04 · SWISS MODERN ============ Neutral grey-white, one red. Helvetica everywhere, flat, objective. Type: Helvetica Neue + Helvetica Neue (system) Alt accents: #E30613 #111111 #0047AB #F39200 #00693E · acids: #DFDFDA #FFD500 #C9D3DD #D9D2C5 Alt bgs: Grey-white #F7F7F5/#FFF · Paper white #FFF/#FFF · Cool grey #EFF0F0/#FAFAFA · corners 0/2/8 */ :root.preset-swiss, :root[data-preset="swiss"] { --bg: #F7F7F5; --bg-deep: #EBEBE8; --surface: #FBFBFA; --paper: #FFFFFF; --true-white: #FFFFFF; --ink: #111111; --black: #111111; --white: #FFFFFF; --accent: #E30613; --accent-2: #111111; --acid: #DFDFDA; --gray: #E6E6E2; --ink-muted: #5C5C5C; --ink-faint: #9A9A9A; --hairline: rgba(17,17,17,0.14); --hairline-strong: rgba(17,17,17,0.32); --border-thin: 1px solid var(--ink); --border-base: 1px solid var(--ink); --border-thick: 8px solid var(--ink); --border-dash: 1px dashed var(--ink); --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --tk-radius: 0px; } /* ============ 05 · NEUMORPHISM ============ One soft surface, dual-light shadows. Elements pressed from the page. Type: Nunito + Geist · load Google Fonts: Nunito, Geist Alt accents: #5B7CFA #8A6DF5 #53B8A7 #EE7FA3 #F2A65B · acids: #BFCBFF #C9F0E4 #FAD1E1 #FFE3C4 Alt bgs: Powder #DEE5F0/#E9EEF7 · Mist grey #E6E9EE/#EFF1F5 · Warm fog #ECE9E4/#F4F2EE · corners 16/10/24 */ :root.preset-neu, :root[data-preset="neu"] { --bg: #DEE5F0; --bg-deep: #CFD8E8; --surface: #E6EBF4; --paper: #E9EEF7; --true-white: #F0F4FA; --ink: #39415A; --black: #39415A; --white: #EAEEF6; --accent: #5B7CFA; --accent-2: #8A6DF5; --acid: #BFCBFF; --gray: #D3DAE7; --ink-muted: #6D7590; --ink-faint: #9AA1B8; --hairline: rgba(57,65,90,0.1); --hairline-strong: rgba(57,65,90,0.2); --border-thin: 1px solid rgba(57,65,90,0.08); --border-base: 1px solid rgba(57,65,90,0.1); --border-thick: 1px solid rgba(57,65,90,0.16); --border-dash: 1px dashed rgba(57,65,90,0.2); --shadow-lvl1: -6px -6px 12px rgba(255,255,255,0.85), 6px 6px 12px rgba(94,107,133,0.28); --shadow-lvl2: -9px -9px 18px rgba(255,255,255,0.9), 9px 9px 18px rgba(94,107,133,0.3); --shadow-lvl3: -14px -14px 28px rgba(255,255,255,0.95), 14px 14px 28px rgba(94,107,133,0.32); --shadow-inset: inset -4px -4px 10px rgba(255,255,255,0.8), inset 4px 4px 10px rgba(94,107,133,0.25); --shadow-accent: -6px -6px 12px rgba(255,255,255,0.85), 6px 6px 12px rgba(91,124,250,0.35); --font-display: 'Nunito', 'Trebuchet MS', sans-serif; --font-body: 'Geist', 'Helvetica Neue', sans-serif; --tk-radius: 16px; } /* ============ 06 · MINIMALISTIC ============ Near-white, near-black, nothing else. One-pixel rules, 2px corners — type does the work. Type: Manrope + Geist · load Google Fonts: Manrope, Geist Alt accents: #1C1C1A #55635B #5D6470 #7A6A57 #3F3F3C · acids: #EDEDE8 #E2E7E2 #E9E4DC #E4E6EB Alt bgs: Near-white #FBFBF9/#FFF · Pure white #FFF/#FFF · Soft grey #F4F4F2/#FBFBFA · corners 2/0/6 */ :root.preset-min, :root[data-preset="min"] { --bg: #FBFBF9; --bg-deep: #F0F0EC; --surface: #FDFDFC; --paper: #FFFFFF; --true-white: #FFFFFF; --ink: #1C1C1A; --black: #1C1C1A; --white: #FFFFFF; --accent: #1C1C1A; --accent-2: #767671; --acid: #EDEDE8; --gray: #EAEAE6; --ink-muted: #71716C; --ink-faint: #A5A5A0; --hairline: rgba(28,28,26,0.1); --hairline-strong: rgba(28,28,26,0.24); --border-thin: 1px solid var(--hairline-strong); --border-base: 1px solid var(--ink); --border-thick: 2px solid var(--ink); --border-dash: 1px dashed var(--ink-faint); --font-display: 'Manrope', 'Helvetica Neue', sans-serif; --font-body: 'Geist', 'Helvetica Neue', sans-serif; --tk-radius: 2px; } /* ========================================================= PRESET STANCE RULES — type + physics adjustments per recipe ========================================================= */ /* serif recipes — relax grotesk tracking, drop variable-font axes */ :root:is(.preset-lux, [data-preset="lux"]) :is(h1, h2, h3, .numeric-giant, .logo), :root:is(.preset-broad, [data-preset="broad"]) :is(h1, h2, h3, .numeric-giant, .logo) { letter-spacing: -0.015em; font-variation-settings: normal; } :root:is(.preset-lux, [data-preset="lux"]) :is(h1, h2) { font-weight: 600; } /* neumorphism — kill literal hard shadows everywhere, re-cast token soft depth, melt borders */ :root:is(.preset-neu, [data-preset="neu"]) body *, :root:is(.preset-neu, [data-preset="neu"]) body *::before, :root:is(.preset-neu, [data-preset="neu"]) body *::after { box-shadow: none !important; border-color: rgba(57,65,90,0.14) !important; } :root:is(.preset-neu, [data-preset="neu"]) body :is(.card, .btn, kbd, .form-control, .segmented, .token-box, .stat-card, .stat-card-xl, .viz-frame, .kpi-hero, .giant-donut, .streak-card, .stat-banner, .striped-card, .permonth-card, .operational-banner, .deal-banner, .gauge-card, .icon-grid, .glyph-grid, .table-container, .cmg, .tree, .toast, .accordion, .preset-card, .ts-frame, .bcomp, .funnel-frame, .cohort-frame, .spark-wrap, #tk-panel, #tk-fab) { box-shadow: var(--shadow-lvl1) !important; } :root:is(.preset-neu, [data-preset="neu"]) body :is(.card, .btn, .giant-donut, .streak-card, .stat-banner, .striped-card, .permonth-card, .operational-banner, .deal-banner, .kpi-hero, .stat-card, .gauge-card, .viz-frame, .stat-card-xl, .preset-card, .ts-frame, .bcomp, .funnel-frame, .cohort-frame, .spark-wrap):hover { box-shadow: var(--shadow-lvl2) !important; } :root:is(.preset-neu, [data-preset="neu"]) :is(.icon-grid, .glyph-grid) { background: var(--bg-deep); } :root:is(.preset-neu, [data-preset="neu"]) :is(h1, h2, h3, .numeric-giant) { font-variation-settings: normal; letter-spacing: -0.02em; font-weight: 800; } /* minimalistic — every border melts to a hairline; display goes light */ :root:is(.preset-min, [data-preset="min"]) body *, :root:is(.preset-min, [data-preset="min"]) body *::before, :root:is(.preset-min, [data-preset="min"]) body *::after { border-color: rgba(28,28,26,0.18) !important; } :root:is(.preset-min, [data-preset="min"]) :is(h1, h2, h3, .numeric-giant) { font-weight: 500; letter-spacing: -0.02em; font-variation-settings: normal; } /* ========================================================= RUNTIME TOKEN MECHANICS — corners, depth, dark mode ========================================================= */ /* corners token — boxy components only, so true circles stay round */ body .btn, body .card, body .tag, body .badge, body .fpill, body .fdrop, body .form-control, body .icon-cell, body .token-box, body .stat-card, body .stat-card-xl, body .viz-frame, body .kpi-hero, body .segmented, body .tk-seg, body #tk-panel, body .qb-add, body .qb-del, body .giant-donut, body .streak-card, body .stat-banner, body .striped-card, body .permonth-card, body .operational-banner, body .deal-banner, body .gauge-card, body .fdrop-panel, body .ts-frame, body .bcomp, body .funnel-frame, body .cohort-frame, body .spark-wrap, body .kanban-col, body .kanban-card, body .mnav-burger, body .drill, body .drill-chip, body .fbar-box, body .fbar-count, body .sec-tag, body .hs-card { border-radius: var(--tk-radius, 0px); } /* depth token — flat kills every hard shadow */ body.tk-flat *, body.tk-flat *::before, body.tk-flat *::after { box-shadow: none !important; } /* theme token — full-page ink mode (dark) */ body.ink-mode { --bg: #0B0C12; --bg-deep: #07080D; --surface: #12131B; --paper: #12131B; --true-white: #181A23; --white: #12131B; --ink: #F6F3EB; --black: #F6F3EB; --ink-muted: #9B9AA1; --ink-faint: #686670; --hairline: rgba(246,243,235,0.14); --hairline-strong: rgba(246,243,235,0.30); --gray: #2A2C38; background: var(--bg); color: var(--ink); }