/*
 * FSM editorial design tokens.
 *
 * Single source of truth: src/FSM.Ui.BlazorServer/UiTokens.cs.
 * Keep this file in sync with UiTokens by convention.
 *
 * Consumers: the App* primitives in Components/Shared/ read these variables.
 * Raw hex literals in Components/**\/*.razor are forbidden — the pre-commit
 * hook at scripts/check-no-hex-in-razor.sh enforces it.
 */

:root {
    /* Ink & surface */
    --fsm-ink: #162033;
    --fsm-ink-mid: #4a5568;
    --fsm-ink-soft: #66758b;
    /* Alias for "muted body copy" — same weight as ink-soft. Keeps call-sites
       that read as "muted text" explicit instead of reaching for ink-soft. */
    --fsm-ink-muted: #66758b;
    --fsm-surface: #ffffff;
    /* Subtly tinted surface for chips/pills/drop-zones — one step off the
       main surface so elements read as grouped without becoming a banner. */
    --fsm-surface-muted: #eef1f5;
    --fsm-bg: #f5f7fb;
    --fsm-line: #e4e8ee;
    --fsm-line-soft: #eef1f5;

    /* Brand */
    --fsm-accent: #1f4fd1;
    --fsm-accent-soft: #e8f1fb;
    --fsm-accent-tint: #f3f8fd;

    /* Tone palette (pills, badges, alerts) */
    --fsm-tone-good-bg: #e6f4ea;
    --fsm-tone-good-fg: #1f6b37;
    --fsm-tone-good-dot: #2e8b4a;
    --fsm-tone-warn-bg: #fff4e0;
    --fsm-tone-warn-fg: #8a5a10;
    --fsm-tone-warn-dot: #d08a2a;
    --fsm-tone-bad-bg: #fdecea;
    --fsm-tone-bad-fg: #9a2f27;
    --fsm-tone-bad-dot: #c24a3a;
    --fsm-tone-info-bg: #e8f1fb;
    --fsm-tone-info-fg: #1565c0;
    --fsm-tone-info-dot: #1976d2;
    --fsm-tone-neutral-bg: #eef1f5;
    --fsm-tone-neutral-fg: #5a6472;
    --fsm-tone-neutral-dot: #9aa4b2;

    /* Typography — families */
    --fsm-font-sans: 'Inter', 'Segoe UI', sans-serif;
    --fsm-font-display: 'Space Grotesk', 'Inter', sans-serif;
    --fsm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Typography — editorial scale (eyebrow, field label/value, mono id) */
    --fsm-eyebrow-size: 11px;
    --fsm-eyebrow-tracking: 0.14em;
    --fsm-eyebrow-weight: 600;
    --fsm-field-label-size: 11px;
    --fsm-field-label-tracking: 0.06em;
    --fsm-field-label-weight: 600;
    --fsm-field-value-size: 14px;
    --fsm-mono-id-size: 12px;
    --fsm-mono-id-tracking: 0;

    /* Radius */
    --fsm-radius-sm: 6px;
    --fsm-radius-md: 8px;
    --fsm-radius-lg: 14px;

    /* Spacing (4-pt scale) */
    --fsm-space-1: 4px;
    --fsm-space-2: 8px;
    --fsm-space-3: 12px;
    --fsm-space-4: 16px;
    --fsm-space-5: 20px;
    --fsm-space-6: 24px;
    --fsm-space-8: 32px;
    --fsm-space-12: 48px;
}

/*
 * Dark-mode overrides. AppShellLayout wraps content in
 * <div class="fsm-theme-dark"> when IsDarkMode=true — MudBlazor v9 does
 * NOT add a .mud-theme-dark class (it drives CSS vars directly), so we
 * own the class toggle. Keep this selector in sync with AppShellLayout.
 */
.fsm-theme-dark {
    --fsm-ink: #e6edf8;
    --fsm-ink-mid: #b9c4d6;
    --fsm-ink-soft: #9fb1c9;
    --fsm-ink-muted: #9fb1c9;
    --fsm-surface: #162033;
    --fsm-surface-muted: #1d2a44;
    --fsm-bg: #0f1724;
    --fsm-line: rgba(159, 177, 201, 0.16);
    --fsm-line-soft: rgba(159, 177, 201, 0.08);

    --fsm-accent: #84a9ff;
    --fsm-accent-soft: #1d2a44;
    --fsm-accent-tint: #162033;

    --fsm-tone-good-bg: #1a3a2a;
    --fsm-tone-good-fg: #7ecfa0;
    --fsm-tone-good-dot: #58b08b;
    --fsm-tone-warn-bg: #3a2e1a;
    --fsm-tone-warn-fg: #e0b878;
    --fsm-tone-warn-dot: #c99a48;
    --fsm-tone-bad-bg: #3a1f22;
    --fsm-tone-bad-fg: #e79ba5;
    --fsm-tone-bad-dot: #de7684;
    --fsm-tone-info-bg: #1d2e48;
    --fsm-tone-info-fg: #9bbcff;
    --fsm-tone-info-dot: #84a9ff;
    --fsm-tone-neutral-bg: #242e41;
    --fsm-tone-neutral-fg: #9fb1c9;
    --fsm-tone-neutral-dot: #7184a3;
}