/* ============================================================================ MyStonks — NEW DESIGN LANGUAGES · themes.css ---------------------------------------------------------------------------- Stux · Tron · FutureStonk — as pure [data-theme] token blocks. ── WHY ATELIER IS NOT IN THIS FILE ────────────────────────────────────────── Atelier already ships in the live app and has since been edited there. The live app is the SOURCE OF TRUTH for Atelier's identity tokens (colors, fonts, radii, shadows) and for the shipping `:root` default. Re-declaring Atelier here would overwrite those live edits — so it's intentionally omitted. This file ADDS languages only. Each block overrides just the identity tokens that differ; it inherits the theme-INVARIANT base (spacing, type scale, weights, --tracking-caps, transitions) from `:root`. ── LOAD ORDER ─────────────────────────────────────────────────────────────── 1. The live app's Atelier styles → defines :root default + Atelier identity 2. base-tokens.css → invariant tokens on :root (skip if the live app's :root already has them) 3. themes.css (this file) → Stux / Tron / FutureStonk Then switch languages with `data-theme` on : → Atelier (live app default, unchanged) RULE: do not add an [data-theme="atelier"] block here. Atelier stays owned by the app. A reference copy of the original all-in-one file (with Atelier) is kept as themes-full-reference.css. Fonts to load for these three languages: IBM Plex Sans · IBM Plex Mono · Space Grotesk · Hanken Grotesk · JetBrains Mono · Chakra Petch · Schibsted Grotesk (Atelier's Newsreader is already loaded by the live app.) Token contract + per-token roles + leak-fix checklist: see THEMING.md. ============================================================================ */ /* ========================================================================== * STUX · off-white + near-black + Blaze Orange (LIGHT, sharp, mono figures) ========================================================================== */ [data-theme="stux"] { --paper:#F1F2EE; --paper-board:#EAEBE5; --rail:#FFFFFF; --card:#FFFFFF; --card-bg:var(--card); --card-border:#D9DCD5; --card-shadow:none; --card-blur:0px; --app-bg-image:none; --ink:#1B1D1E; --muted:#5E6360; --faint:#9AA09C; --line:#D9DCD5; --line-board:#CFD3CB; --green:#242628; --accent:#FF6101; --on-accent:#F4F5F1; --accent-gradient:var(--accent); --glow-accent:none; --gain:#0E8C3B; --gainBg:#E2F4E7; --gainBd:#BCE6C6; --loss:#D62B22; --lossBg:#FBE6E3; --lossBd:#F2C6C1; --b1:#FF6101; --b1Bg:#FFE8D9; --gold:#E59400; --goldBg:#FFF1D4; --purple:#7A5AF8; --teal:#12B5A4; --series-1:#242628; --series-2:#FF6101; --series-3:#E59400; --series-grid:var(--line); --series-axis:var(--faint); --series-fill:rgba(36,38,40,.08); --font-display:"Space Grotesk", system-ui, sans-serif; --font-ui:"Hanken Grotesk", system-ui, sans-serif; --font-figure:"JetBrains Mono", ui-monospace, monospace; /* monospaced ledger figures */ --font-mono:"JetBrains Mono", ui-monospace, monospace; --font-serif:var(--font-display); --font-sans:var(--font-ui); --font-numeric:var(--font-figure); --tracking-display:-0.012em; /* sharp / 0 radius everywhere */ --r-sm:0px; --r-md:0px; --r-button:0px; --r-tile:0px; --r-card:0px; --r-pill:0px; --shadow-card:none; --shadow-lift:0 10px 24px -16px rgba(20,22,24,.30); --shadow-modal:0 24px 60px -30px rgba(20,22,24,.50); --shadow-drawer:0 0 60px -16px rgba(20,22,24,.30); --focus-ring:0 0 0 2px rgba(255,97,1,.30); } /* ========================================================================== * TRON · dark trading-desk terminal, electric cyan on grid (tabular sans) ========================================================================== */ [data-theme="tron"] { --paper:#0A0E15; --paper-board:#080C12; --rail:#0B111A; --card:#111B27; --card-bg:var(--card); --card-border:#1C2C3C; --card-blur:0px; --card-shadow:0 10px 30px -16px rgba(0,0,0,.8), 0 0 24px -16px rgba(32,229,224,.5); /* faint terminal grid field */ --app-bg-image: linear-gradient(rgba(32,229,224,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(32,229,224,.035) 1px, transparent 1px); --app-bg-size:44px 44px, 44px 44px; --ink:#D7E5F2; --muted:#6E8398; --faint:#455A70; --line:#1C2C3C; --line-board:#16242F; --green:#20E5E0; --accent:#20E5E0; --on-accent:#03141A; --accent-gradient:var(--accent); --glow-accent:0 0 22px -6px rgba(32,229,224,.6); --gain:#1FE490; --gainBg:rgba(31,228,144,.10); --gainBd:rgba(31,228,144,.34); --loss:#FF4D61; --lossBg:rgba(255,77,97,.11); --lossBd:rgba(255,77,97,.36); --b1:#38BDF8; --b1Bg:rgba(56,189,248,.13); --gold:#F2B53C; --goldBg:rgba(242,181,60,.13); --purple:#A98BFF; --teal:#2DE2C8; --series-1:#20E5E0; --series-2:#38BDF8; --series-3:#F2B53C; --series-grid:var(--line); --series-axis:var(--faint); --series-fill:rgba(32,229,224,.12); --font-display:"Chakra Petch", system-ui, sans-serif; --font-ui:"IBM Plex Sans", system-ui, sans-serif; --font-figure:"IBM Plex Sans", system-ui, sans-serif; /* tabular sans figures */ --font-mono:"IBM Plex Mono", ui-monospace, monospace; --font-serif:var(--font-display); --font-sans:var(--font-ui); --font-numeric:var(--font-figure); --tracking-display:0.005em; /* subtle ~5px */ --r-sm:5px; --r-md:5px; --r-button:5px; --r-tile:5px; --r-card:5px; --r-pill:999px; --shadow-card:0 10px 30px -16px rgba(0,0,0,.80); --shadow-lift:0 16px 40px -18px rgba(0,0,0,.85); --shadow-modal:0 30px 80px -30px #000, 0 0 40px -20px rgba(32,229,224,.45); --shadow-drawer:0 0 70px -12px rgba(0,0,0,.7); --focus-ring:0 0 0 2px rgba(32,229,224,.25); } /* ========================================================================== * FUTURESTONK · dark glassmorphism, blue→violet (Liquibase-inspired) ========================================================================== */ [data-theme="future"] { --paper:#09081A; --paper-board:#07061A; --rail:#0C0B22; --card:#15143A; /* GLASS: translucent gradient fill + blur + violet hairline + glow */ --card-bg:linear-gradient(160deg, rgba(124,92,255,.10), rgba(61,107,255,.05) 40%, rgba(21,20,58,.72)); --card-border:rgba(124,92,255,.22); --card-blur:16px; --card-shadow:0 18px 50px -24px rgba(0,0,0,.85), 0 0 60px -30px rgba(124,92,255,.5); /* ambient blue/violet glow field */ --app-bg-image: radial-gradient(900px 520px at 82% -8%, rgba(61,107,255,.28), transparent 60%), radial-gradient(820px 600px at 8% 108%, rgba(124,92,255,.26), transparent 58%), radial-gradient(600px 400px at 60% 120%, rgba(47,224,212,.10), transparent 60%); --ink:#ECEBFF; --muted:#9B98CE; --faint:#5C5990; --line:#2A2858; --line-board:#211F48; --green:#3D6BFF; --accent:#7C5CFF; --on-accent:#FFFFFF; --accent-gradient:linear-gradient(120deg,#3D6BFF,#7C5CFF); /* gradient button fill */ --glow-accent:0 10px 30px -10px rgba(61,107,255,.7); --gain:#29E08C; --gainBg:rgba(41,224,140,.12); --gainBd:rgba(41,224,140,.36); --loss:#FF5470; --lossBg:rgba(255,84,112,.13); --lossBd:rgba(255,84,112,.38); --b1:#4D8CFF; --b1Bg:rgba(77,140,255,.14); --gold:#F4B14A; --goldBg:rgba(244,177,74,.14); --purple:#9B7CFF; --teal:#2FE0D4; --series-1:#4D8CFF; --series-2:#9B7CFF; --series-3:#2FE0D4; --series-grid:var(--line); --series-axis:var(--faint); --series-fill:rgba(77,140,255,.14); --font-display:"Schibsted Grotesk", system-ui, sans-serif; --font-ui:"Hanken Grotesk", system-ui, sans-serif; --font-figure:"Hanken Grotesk", system-ui, sans-serif; /* tabular sans figures */ --font-mono:"IBM Plex Mono", ui-monospace, monospace; --font-serif:var(--font-display); --font-sans:var(--font-ui); --font-numeric:var(--font-figure); --tracking-display:-0.018em; /* generously rounded; buttons + chips are pills */ --r-sm:999px; --r-md:14px; --r-button:999px; --r-tile:14px; --r-card:18px; --r-pill:999px; --shadow-card:0 18px 50px -24px rgba(0,0,0,.85), 0 0 60px -30px rgba(124,92,255,.5); --shadow-lift:0 26px 60px -28px rgba(0,0,0,.9), 0 0 70px -30px rgba(124,92,255,.6); --shadow-modal:0 40px 100px -36px #000, 0 0 80px -34px rgba(124,92,255,.6); --shadow-drawer:0 0 80px -12px rgba(0,0,0,.8); --focus-ring:0 0 0 2px rgba(124,92,255,.28); } /* ========================================================================== * SLATE · THE FREE DEFAULT — cool-neutral dark, sans-first, monochrome accent (deliberately restrained so the four premium languages read as upgrades) ========================================================================== */ [data-theme="slate"] { /* ---- Surfaces (cool slate, dark) ------------------------------------- */ --paper:#14171B; --paper-board:#0F1216; --rail:#171B20; --card:#1C2127; --card-bg:var(--card); --card-border:var(--line); --card-shadow:var(--shadow-card); --card-blur:0px; --app-bg-image:none; --app-bg-size:auto; /* flat field — no grid (Tron) / glow (Future) */ /* ---- Ink & lines (cool neutral) -------------------------------------- */ --ink:#E6E9ED; --muted:#98A0AA; --faint:#626A74; --line:#2A2F36; --line-board:#23272E; /* ---- Brand / accent (MONOCHROME — near-white, light-on-dark) ---------- */ --green:#E8EBEF; --accent:var(--green); --accent-gradient:var(--accent); --on-accent:#14171B; --glow-accent:none; /* ---- Gain / loss (semantics survive: green up, coral-red down) -------- */ --gain:#46C58A; --gainBg:rgba(70,197,138,.12); --gainBd:rgba(70,197,138,.30); --loss:#EC6F59; --lossBg:rgba(236,111,89,.13); --lossBd:rgba(236,111,89,.32); /* ---- Category accents (chips, badges, donut — brightened for dark) ---- */ --b1:#5B9CF6; --b1Bg:rgba(91,156,246,.14); --gold:#E0AE54; --goldBg:rgba(224,174,84,.14); --purple:#9C84E8; --teal:#45C3B5; /* ---- Chart series (read by theme.js — primary line stays neutral) ----- */ --series-1:#CAD1D9; --series-2:#5B9CF6; --series-3:#E0AE54; --series-grid:var(--line); --series-axis:var(--faint); --series-fill:rgba(202,209,217,.06); /* ---- Type (sans-first; Source Sans 3 display + IBM Plex superfamily) -- */ --font-display:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; /* humanist, Myriad-like; ship headings at 700 */ --font-ui:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-figure:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* tabular ledger figures */ --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-serif:var(--font-display); --font-sans:var(--font-ui); --font-numeric:var(--font-figure); --tracking-display:-0.006em; /* ---- Shape (moderate ~7px — between Stux's 0 and Future's pills) ------ */ --r-sm:6px; --r-md:7px; --r-button:var(--r-md); --r-tile:9px; --r-card:11px; --r-pill:100px; /* ---- Elevation (soft, no coloured glow) ------------------------------ */ --shadow-card:0 8px 24px -18px rgba(0,0,0,.70); --shadow-lift:0 16px 36px -20px rgba(0,0,0,.78); --shadow-modal:0 30px 80px -28px rgba(0,0,0,.82); --shadow-drawer:0 0 70px -12px rgba(0,0,0,.72); --focus-ring:0 0 0 3px rgba(232,235,239,.14); /* neutral light halo */ }