/* ============================================================ MyStonks — "Atelier" design language · DESIGN TOKENS ------------------------------------------------------------ The Atelier redesign re-skins MyStonks from the original dark-first / Fira Sans / brand-blue look into a warm, editorial, light-first private-bank language: warm paper, Newsreader serif figures, IBM Plex Sans labels, deep-sage green and terracotta. These values were extracted from the approved HTML prototypes (where they lived as per-component inline CSS variables) and consolidated here as the source of truth. Token NAMES match the ones used throughout the prototype components, so the prototypes and this file line up 1:1. Light is the shipping theme; a graphite Dark theme is included. ============================================================ */ /* Fonts — load before this file (matches the prototypes): */ :root { /* ---- Surfaces (warm paper) ------------------------------------- */ --paper: #F1EDE4; /* app/page background (warm bone) */ --paper-board: #EDE8DC; /* slightly deeper paper used behind boards */ --rail: #ECE7DB; /* sidebar / secondary surface */ --card: #FBFAF6; /* cards, inputs, raised surfaces (near-white)*/ /* ---- Ink (text) ------------------------------------------------ */ --ink: #1B1A16; /* primary text / headings */ --muted: #7A766C; /* secondary text, captions */ --faint: #A8A294; /* tertiary text, placeholders, icons */ /* ---- Lines ----------------------------------------------------- */ --line: #E2DDD1; /* hairline borders, dividers */ --line-board: #D9D3C5;/* hairline on the deeper board paper */ /* ---- Brand green ----------------------------------------------- */ --green: #1F4B38; /* deep sage — wordmark, primary buttons */ --accent: #1F4B38; /* alias of --green for primary accents */ /* ---- Gain (positive) ------------------------------------------- */ --gain: #2C7A57; /* positive value text / +% */ --gainBg: #E7F0E6; /* positive pill / tile fill */ --gainBd: #CADFC7; /* positive border */ /* ---- Loss (negative, terracotta) ------------------------------- */ --loss: #A8412B; /* negative value text / -% */ --lossBg: #F6E9E4; /* negative pill / tile fill */ --lossBd: #E6CDC3; /* negative border */ /* ---- Category accents (charts, portfolio chips, badges) -------- */ --b1: #2F6BD6; --b1Bg: #E6EDF8; /* blue */ --gold: #E2A53A; --goldBg: #F6EEDC; /* amber/gold */ --purple: #9B6FD0; /* violet */ --teal: #39B7A6; /* teal */ /* ============================================================ TYPOGRAPHY Two families. Newsreader (serif) carries display, headings, and ALL numeric figures (prices, %, tickers) for the editorial "annual-report" feel. IBM Plex Sans carries UI: labels, body, buttons, table cells, captions. ============================================================ */ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-numeric: var(--font-serif); /* figures are serif + tabular-nums */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Type scale (px values as used in the 1920-wide prototypes) */ --text-label: 11px; /* uppercase eyebrows / table headers (tracking .06em) */ --text-xs: 12px; /* meta, captions */ --text-sm: 13px; /* dense UI, table cells, buttons */ --text-body: 14px; /* body default */ --text-md: 17px; /* card titles (serif) */ --text-lg: 19px; /* prominent card titles (serif) */ --text-xl: 24px; /* section headings (serif) */ --text-2xl: 34px; /* wordmark / page lede figures */ --text-3xl: 38px; /* page H1 (serif) */ --text-stat: 46px; /* hero stat figures (serif) */ --leading-tight: 1.2; --leading-normal: 1.5; --tracking-tight: -0.015em; /* serif display */ --tracking-caps: 0.06em; /* uppercase labels */ /* ============================================================ SHAPE & SPACING ============================================================ */ --r-sm: 8px; /* chips, small action buttons */ --r-md: 9px; /* inputs, buttons */ --r-tile: 11px; /* StonkBoard tiles */ --r-card: 14px; /* cards, panels */ --r-pill: 100px; /* pills, badges, avatars */ /* 4px base rhythm; common steps observed in the prototypes */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 28px; --space-7: 36px; /* ============================================================ ELEVATION & MOTION Shadows are soft and warm, never heavy. Cards mostly rely on the hairline border; only floating elements (tiles, drawers, modals, focus cards) lift. ============================================================ */ --shadow-card: 0 8px 24px -20px rgba(0,0,0,.40); --shadow-lift: 0 18px 40px -22px rgba(0,0,0,.50); --shadow-modal: 0 30px 80px -24px rgba(0,0,0,.55); --shadow-drawer:0 0 70px -12px rgba(0,0,0,.50); --focus-ring: 0 0 0 3px var(--gainBg); /* green focus halo on inputs */ --t-fast: .12s ease; --t-normal: .14s ease; --t-drawer: .3s cubic-bezier(.4,0,.2,1); /* ============================================================ EXPANDED THEME CONTRACT (added for the multi-language picker) ------------------------------------------------------------ The new design languages (Stux/Tron/FutureStonk in themes.css) paint from these richer token names. Atelier defines them here as aliases of its existing values so it renders identically and so component CSS can paint from ONE contract across all themes. See design-handoff-themes/THEMING.md. ============================================================ */ /* Paintable card surface (solid here; a glass gradient in FutureStonk) */ --card-bg: var(--card); --card-border: var(--line); --card-shadow: var(--shadow-card); --card-blur: 0px; /* backdrop-filter radius; 0 = no glass */ /* Ambient field behind the app (Tron grid / Future glow); flat here */ --app-bg-image: none; --app-bg-size: auto; /* Primary accent / buttons */ --accent-gradient: var(--accent); /* solid fill; gradient in Future */ --on-accent: #F1EDE4; /* text/icon on a primary-filled bg */ --glow-accent: none; /* accent glow shadow; none in light */ /* Semantic type roles (Atelier maps them onto serif/sans/numeric) */ --font-display: var(--font-serif); --font-ui: var(--font-sans); --font-figure: var(--font-numeric); --font-mono: ui-monospace, "IBM Plex Mono", "SFMono-Regular", Menlo, monospace; /* Chart series (read in JS via theme.js; lifted from history.php literals) */ --series-1: #1F4B38; /* primary line (market value) */ --series-2: #2F6BD6; /* benchmark line (book value) */ --series-3: #E2A53A; /* contribution/total return */ --series-grid: var(--line); --series-axis: #7A766C; --series-fill: rgba(31,75,56,.08); /* Button radius + display tracking (slots the themes override) */ --r-button: var(--r-md); --tracking-display: var(--tracking-tight); } /* ============================================================ DARK THEME — "graphite Atelier" Apply by adding [data-theme="dark"] (or .dark) to the root. Light is the shipping default; dark is a documented option. ============================================================ */ [data-theme="dark"], .dark { --paper: #2B2A27; --paper-board: #231F18; --rail: #252420; --card: #3A3935; --ink: #EFEEE9; --muted: #A8A49C; --faint: #7E7A72; --line: #4A4843; --line-board: #403828; --green: #74CCA0; --accent: #74CCA0; --gain: #8BDCB4; --gainBg: rgba(116,204,160,.16); --gainBd: rgba(116,204,160,.34); --loss: #ECAB8F; --lossBg: rgba(224,142,112,.18); --lossBd: rgba(224,142,112,.34); /* expanded contract overrides for graphite dark */ --on-accent: #1B1A16; /* graphite --green is light sage → dark text */ --series-1: #74CCA0; /* market line tuned for the dark paper */ --series-2: #5C9CE6; /* book line */ --series-3: #E2A53A; /* total return (gold reads fine on graphite) */ --series-axis: #A8A49C; --series-fill: rgba(116,204,160,.10); }