/* ═══════════════════════════════════════
   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;

    /* 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;
    --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;
    --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;

    --ij-lp-clay: #d97757;
}