/* * FSLaunch App Chrome Theme System * ================================= * Token contract — every variable below is consumed by the app pages. * Pages should link this file in and remove their local :root color block. * Theme is driven by data-theme on ; font face by data-font on . * * Primary token vocabulary (pages already use these names): * --bg page / canvas background * --bg2 secondary background (storefront uses for slight offset) * --bar top-bar / nav rail background (build page alias for --panel) * --panel surface panel (cards, sidebar, modal, AI panel) * --panel2 raised / nested panel surface * --glass frosted / translucent panel overlay (panelSoft in design) * --line default border / divider * --line2 stronger / visible border (lineSoft in design inverted — see note) * --ink body text (on bg) * --mute muted / de-emphasized text * --sub sub-label text (admin page alias — same weight as --mute) * --soft mid-weight secondary text * --gold primary accent (a1 in design; renamed per brand: gold on dark, amber/teal on light) * --gold2 dimmed / hover variant of primary accent * --violet secondary accent (a2) * --cyan tertiary accent (a3) * --acc text color on top of an accent-filled surface (ink-on-accent) * --r default border-radius * --sans body font stack * --mono monospace font stack * --red status / danger (admin page) * --green status / success (admin page) * --blue status / info (admin page) * * Note on --line vs --line2: * The design's `line` is the default border; `lineSoft` is lighter. * The pages use --line (lighter) and --line2 (slightly stronger), so: * --line = design's `line` (the standard divider) * --line2 = design's `lineSoft` pushed to be the "emphasis" border on light themes * On dark themes the existing mapping (line weaker, line2 stronger) is preserved. * * Font pickers (data-font on ): * "sans" — Inter Tight (default) * "editorial" — Playfair Display (editorial serif) * "mono" — JetBrains Mono (code/terminal feel) */ /* ─── DEFAULT: fsnoir (dark gold) ───────────────────────────────────────── */ :root { /* backgrounds */ --bg: #070708; --bg2: #0c0c0f; --bar: #0d0d10; --panel: rgba(22, 22, 27, .62); --panel2: #101015; --glass: rgba(255, 255, 255, .04); /* borders */ --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .14); /* text */ --ink: #f6f5f1; --mute: #94928d; --sub: #a6a49e; --soft: #cbc9c3; /* accents */ --gold: #e8c66a; --gold2: #caa544; --violet: #8a7bff; --cyan: #5ad6e0; --acc: #15130c; /* text on accent surface */ /* semantic status */ --red: #ff7a7a; --green: #5bd08a; --blue: #7d9bff; /* structure */ --r: 18px; --sans: "Inter Tight", Inter, system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; } /* ─── fslight (clean light) ─────────────────────────────────────────────── */ [data-theme="fslight"] { --bg: #eceae3; --bg2: #e3e1d9; --bar: #ffffff; --panel: #ffffff; --panel2: #f6f4ee; --glass: rgba(0, 0, 0, .03); --line: rgba(0, 0, 0, .12); --line2: rgba(0, 0, 0, .06); --ink: #1a1a20; --mute: #6c6963; --sub: #7a7874; --soft: #3f3b35; --gold: #caa544; --gold2: #a88830; --violet: #6b5fe0; --cyan: #2a8aaa; --acc: #15130c; --red: #c0392b; --green: #27ae60; --blue: #2980b9; } /* ─── notebook (warm paper) ─────────────────────────────────────────────── */ [data-theme="notebook"] { --bg: #f4ede0; --bg2: #ebe2d0; --bar: #fffdf8; --panel: #fffdf8; --panel2: #ebe2d1; --glass: rgba(26, 24, 20, .04); --line: #c9bfa9; --line2: #ddd2bb; --ink: #1a1814; --mute: #7a6f5c; --sub: #8a7e6a; --soft: #4a4338; --gold: #a87c3d; --gold2: #8f6830; --violet: #7a1f2b; --cyan: #4a5d3a; --acc: #f4ede0; --red: #9a2318; --green: #3d6e38; --blue: #2a4a7a; } /* ─── whiteorange (warm white + orange) ─────────────────────────────────── */ [data-theme="whiteorange"] { --bg: #faf6ef; --bg2: #f3ece0; --bar: #ffffff; --panel: #ffffff; --panel2: #f3ece0; --glass: rgba(0, 0, 0, .025); --line: #e3d8c8; --line2: #efe7da; --ink: #211712; --mute: #8a7560; --sub: #998166; --soft: #5a4636; --gold: #c2691c; --gold2: #a5581a; --violet: #7a1f2b; --cyan: #3a7a60; --acc: #fff8f0; --red: #b5280a; --green: #2e6e3a; --blue: #2a5080; } /* ─── darkorange (dark amber) ───────────────────────────────────────────── */ [data-theme="darkorange"] { --bg: #0b0a08; --bg2: #141208; --bar: #16140f; --panel: #16140f; --panel2: #252219; --glass: rgba(255, 255, 255, .03); --line: #3a3428; --line2: #2e2a20; --ink: #ede4d0; --mute: #9e9280; --sub: #ada18e; --soft: #c8bfab; --gold: #c9a05a; --gold2: #a8843a; --violet: #c44a5a; --cyan: #6a8a58; --acc: #0b0a08; --red: #e05050; --green: #7ab86a; --blue: #6a90c8; } /* ─── modernflat (minimal off-white) ────────────────────────────────────── */ [data-theme="modernflat"] { --bg: #f2f2ef; --bg2: #e8e8e4; --bar: #ffffff; --panel: #ffffff; --panel2: #e8e8e4; --glass: rgba(0, 0, 0, .03); --line: #c8c8c2; --line2: #d8d8d2; --ink: #111111; --mute: #888880; --sub: #999990; --soft: #444444; --gold: #4e7a8c; --gold2: #3a6070; --violet: #b03040; --cyan: #5a9aac; --acc: #ffffff; --red: #c0302a; --green: #2e8040; --blue: #2a60a0; } /* ─── Font face overrides (data-font on ) ─────────────────────────── */ /* default: Inter Tight — set by :root above */ [data-font="editorial"] { --sans: "Playfair Display", Georgia, "Times New Roman", serif; } [data-font="mono"] { --sans: "JetBrains Mono", "Fira Code", ui-monospace, monospace; } /* ─── Light-theme utility helpers ───────────────────────────────────────── */ /* On light themes nav/backdrop blur needs an opaque-ish base */ [data-theme="fslight"] nav, [data-theme="notebook"] nav, [data-theme="whiteorange"] nav, [data-theme="modernflat"] nav { background: rgba(250, 246, 239, .88) !important; border-bottom-color: var(--line) !important; } /* Aurora orbs on light themes should use a screen-blend-friendly opacity */ [data-theme="fslight"] .aurora i, [data-theme="notebook"] .aurora i, [data-theme="whiteorange"] .aurora i, [data-theme="modernflat"] .aurora i { opacity: .12; mix-blend-mode: multiply; } /* Smooth theme transition (applied to app shell element) */ [data-theme] body, [data-theme] .top, [data-theme] nav { transition: background-color .35s ease, border-color .25s ease, color .25s ease; }