/* ═══════════════════════════════════════ InvestJournal design tokens — the single --ij-* source. Light on :root; dark under .ij-theme-dark (MudBlazor swaps --mud-palette-* with NO theme class, so both MainLayouts add ij-theme-dark themselves). Palette values mirror StockGrade.ComponentLibrary/Theme/AppPalette{Light,Dark}.cs and are guarded by ThemeTokensDriftTests — change them there first. Load order: this file BEFORE app-layout.css in every host. ═══════════════════════════════════════ */ :root { /* Brand palette (mirrors AppPaletteLight) */ --ij-bg: #ffffff; --ij-surface: #ffffff; --ij-bg-gray: #f5f5f7; --ij-text-primary: #1d1d1f; --ij-text-secondary: #5f5f63; --ij-primary: #0071e3; --ij-divider: #d2d2d7; /* #1743 §1. --ij-primary is a FILL colour first (white sits on it), so it cannot also be darkened far enough to serve as text on a light tint. Split the roles, exactly as --ij-lp-purple / --ij-lp-purple-text already do: --ij-primary-text blue TEXT on a surface or a light tint. #0071e3 is 4.70:1 on white but only 3.87:1 on .ij-dcf-ai-btn's own primary-18% gradient — #0063c8 is 4.52:1 on that worst real ground. --ij-primary-fill a FILLED control carrying white label text. In DARK the #2997ff fill left white at 3.02:1, below the 4.5:1 a 14px/500 label needs (.ij-btn-primary, .wlc-btn-create); #0a72d4 restores 4.80:1. */ --ij-primary-text: #0063c8; --ij-primary-fill: #0071e3; /* #1743 follow-up. Amber has the same two-role problem the blue had, and a worse version of it: as a FILL it must stay bright to read as a warning, but as TEXT on a light ground #f59e0b measures 2.15:1 on white and 1.64:1 on the stacked grey the DCF editor nests — the lowest real-text ratio found anywhere in this audit, and one the audit itself never listed. ~10 call sites paint warning as text: the Pro chip, the DCF verdict, the calendar, the desk, the portfolio margin-of-safety cell. #895806 is 4.60:1 on that worst ground. It is a deep amber rather than the bright one, which is the unavoidable cost of amber-on-white at AA — the FILL keeps the bright value, so a warning still looks like a warning. */ --ij-warning-text: #895806; /* Gain / loss (#524). Deliberately NOT Success/Error: a loss is not an error state — that separation is about MEANING and still holds. Light aliases the DARKENED palette values because the base Success/Error were only ~3.4:1 on white and failed at 13px tabular; #1743 §1 has since pulled the bases down to those same darkened values, so the two now coincide in light. Numeric text only; never a row background, never the allocation bar, never a filled chip. */ --ij-gain: #157a30; --ij-loss: #c62828; /* Naming three values the shipped CSS already hardcodes (#524). */ /* #1743 §1 — the single biggest cause in the HIG audit (16 of 85 failures). Hint text had TWO ways of being too faint: this token at #a1a1a6 (1.93:1 on a lifted ground), and ~40 call sites painting --mud-palette-text-disabled, an ALPHA colour meant for genuinely disabled controls — rgba(0,0,0,0.25) measured 1.83:1 against a 4.5:1 requirement, in both themes. Those call sites now point here, and this token carries roughly the greys secondary vacated, pulled down far enough to survive STACKED tints: the DCF editor nests a 5% read-only row inside a 12% field group, which composites to #e9e9ea, not the #f8f8f9 a single 5% layer would give. #6e6e73 measured 4.18:1 there in the browser; #67676b is 4.64:1. --mud-palette-text-disabled keeps its alpha and its real job (disabled controls, which WCAG and Apple both exempt). The hierarchy is compressed, not lost — three AA-passing greys cannot be far apart on white, so secondary and tertiary now differ by ~8 sRGB units in light. That is the honest cost of AA. */ --ij-text-tertiary: #67676b; --ij-field: var(--ij-bg-gray); --ij-primary-tint: rgba(0, 113, 227, 0.08); /* Landing-page accents (moved from app-layout.css). Purple/pink/teal are theme-invariant; clay (the Claude mark) gets a dark override below. */ --ij-lp-purple: #a855f7; /* Text-safe purple. #a855f7 measures 3.96:1 on the light surface (#ffffff) — below AA's 4.5:1 — so it may paint a decorative fill (a 3px spine, a glow, a gradient) but never small text. #9333ea is 5.38:1 on white. In DARK the base purple already clears AA (4.91:1 on #0d0d0d), so this token is re-declared under .ij-theme-dark back to #a855f7 rather than left to inherit — a value declared only on :root freezes the light colour into the dark theme (the --ij-field trap below). Guarded by ThemeContrastTests. */ --ij-lp-purple-text: #9333ea; /* Earnings-calendar indigo (#1503, Canvas-20): a Scheduled report on the calendar, the StockView chip, the desk's Earnings-ahead eyebrow. Not a MudBlazor palette slot — a design accent like --ij-lp-purple. Dark is the design's #7e8fff; light is the same hue pulled down to 5.4:1 on white for 11.5px chip text (ThemeContrastTests). */ --ij-event: #4a5ae8; --ij-event-tint: rgba(74, 90, 232, 0.12); --ij-lp-pink: #ec4899; --ij-lp-teal: #2dd4bf; --ij-lp-clay: #c96442; /* Type (mirrors AppTypography.Default) */ --ij-font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; --ij-font-size-body: 0.9375rem; --ij-line-height-body: 1.47; /* Shape & chrome (mirrors AppLayoutProperties) */ --ij-radius: 4px; --ij-appbar-height: 64px; /* Spacing steps — the 4px grid the app already uses */ --ij-space-1: 4px; --ij-space-2: 8px; --ij-space-3: 12px; --ij-space-4: 16px; /* The ladder skipped 5 while nothing asked for it, but four rules in portfolio.css already did — two with a `, 20px` fallback and two without, and those two silently resolved to nothing. The summary strip's mobile `gap: var(--ij-space-5)` therefore computed to `normal`, i.e. ZERO, which ran the CAD and USD blocks into one another at 375px. Defining the step is the fix; it is on the same 4px grid as its neighbours. */ --ij-space-5: 20px; --ij-space-6: 24px; --ij-space-8: 32px; } .ij-theme-dark { /* Brand palette (mirrors AppPaletteDark) */ --ij-bg: #000000; --ij-surface: #0d0d0d; --ij-bg-gray: #161617; --ij-text-primary: #f5f5f7; --ij-text-secondary: #939398; --ij-primary: #2997ff; --ij-divider: #333336; /* #1743 §1 — see the :root note. Blue text already clears AA on every dark ground it lands on (5.12:1 worst, on the AI button's own tint), so the TEXT token keeps the base primary; only the FILL is deepened, to put white back above 4.5:1 on .ij-btn-primary / .wlc-btn-create. */ --ij-primary-text: #2997ff; --ij-primary-fill: #0a72d4; /* Dark needs no separate value: on a dark ground the bright amber is already 7.79:1 at its worst (the verdict button's own 18% tint). Re-declared rather than inherited — a value declared only on :root freezes the LIGHT colour into the dark theme (the --ij-field trap below). */ --ij-warning-text: #ffb545; /* Dark aliases the BASE palette values — on black they clear contrast without darkening (mirrors AppPaletteDark Success/Error). */ --ij-gain: #3dcb6c; --ij-loss: #ff3f5f; /* #1743 §1 — dark counterpart. #5a5a60 was 2.16:1 on a lifted ground; #86868b is 4.68:1 on the dialog surface and 5.06:1 on pure black, while staying visibly dimmer than the new --ij-text-secondary (#939398). */ --ij-text-tertiary: #86868b; --ij-primary-tint: rgba(41, 151, 255, 0.14); /* MUST be re-declared here, not left to inherit from :root. A custom property holding var(--ij-bg-gray) is substituted where it is DECLARED, so the :root copy froze the LIGHT gray and carried it into dark — filled fields rendered near-white on black (19A caught it; portfolio.css has used --ij-field since #524). */ --ij-field: var(--ij-bg-gray); --ij-lp-purple-text: #a855f7; --ij-event: #7e8fff; --ij-event-tint: rgba(126, 143, 255, 0.14); --ij-lp-clay: #d97757; }