/* ═══════════════════════════════════════
   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: #6e6e73;
    --ij-primary: #0071e3;
    --ij-divider: #d2d2d7;

    /* Gain / loss (#524). Deliberately NOT Success/Error: a loss is not an error
       state. Light aliases the DARKENED palette values — base Success #1a9c3e is
       only ~3.4:1 on white and fails at 13px tabular. Numeric text only; never a
       row background, never the allocation bar, never a filled chip in a row. */
    --ij-gain: #157a30;
    --ij-loss: #c62828;

    /* Naming three values the shipped CSS already hardcodes (#524). */
    --ij-text-tertiary: #a1a1a6;
    --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: #86868b;
    --ij-primary: #2997ff;
    --ij-divider: #333336;

    /* Dark aliases the BASE palette values — on black they clear contrast
       without darkening (mirrors AppPaletteDark Success/Error). */
    --ij-gain: #3dcb6c;
    --ij-loss: #ff3f5f;

    --ij-text-tertiary: #5a5a60;
    --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;
}