/* OutaStory — Default theme palette
 *
 * The signature OutaStory look. Identical to the v0.x baseline that
 * shipped before the user-selectable theme system; this file just
 * extracts the palette declarations from theme.css so each theme can
 * own its own .css file in /themes/ keyed on the manifest id.
 *
 * Selectors
 * ─────────
 * Each rule block matches BOTH the legacy attribute shape (just
 * data-theme="light" / data-theme="dark") AND the new shape (data-theme
 * = theme id PLUS data-theme-mode = light/dark) so the JS-bridge swap
 * in the next commit can ship without a flash. Once every layout reads
 * the new shape, the legacy selectors can come out — but for now they
 * are the contract under which theme.css used to render, and we don't
 * want to risk a regression on a refactor commit.
 *
 * data-theme-mode ONLY ever holds "light" or "dark" in the rendered
 * HTML — the JS bridge resolves "system" against
 * matchMedia('(prefers-color-scheme: dark)') BEFORE writing the
 * attribute, so this CSS doesn't need a prefers-color-scheme block
 * for the system-tracking case. The JS bridge listens to the
 * matchMedia 'change' event and rewrites the attribute when the OS
 * preference flips, so the user sees the visual update without a
 * reload.
 */

:root,
[data-theme="light"],
[data-theme="default"][data-theme-mode="light"] {
    /* Primary */
    --os-primary: #1b6ec2;
    --os-primary-hover: #1558a0;
    --os-primary-light: #e8f1fb;
    --os-primary-dark: #0d4a8a;

    /* Gradient (sidebar/branding) */
    --os-gradient-start: #052767;
    --os-gradient-end: #3a0647;
    --os-gradient: linear-gradient(180deg, var(--os-gradient-start) 0%, var(--os-gradient-end) 100%);

    /* Accent */
    --os-accent: #258cfb;
    --os-accent-hover: #0a6fd4;

    /* Surfaces */
    --os-background: #f5f5f7;
    --os-surface: #ffffff;
    --os-surface-variant: #f0f0f2;
    --os-surface-elevated: #ffffff;

    /* Text */
    --os-text-primary: #1a1a2e;
    --os-text-secondary: #6b6b80;
    --os-text-tertiary: #9e9eb0;
    --os-text-on-primary: #ffffff;
    --os-text-on-dark: #ffffff;

    /* Borders */
    --os-border: #e4e4e8;
    --os-border-light: #f0f0f2;
    --os-border-focus: #258cfb;

    /* Status */
    --os-success: #26b050;
    --os-success-light: #e8f8ee;
    --os-error: #e50000;
    --os-error-light: #fde8e8;
    --os-warning: #f5a623;
    --os-warning-light: #fef5e7;
    --os-info: #1b6ec2;

    /* Shadows */
    --os-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --os-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --os-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Star rating */
    --os-star-filled: #f5a623;
    --os-star-empty: #d4d4d8;

    /* Tab active indicator */
    --os-tab-active: #1b6ec2;
    --os-tab-inactive: #6b6b80;

    /* Overlay */
    --os-overlay: rgba(0, 0, 0, 0.4);
    --os-overlay-light: rgba(0, 0, 0, 0.1);
    /* Tour scrim — dedicated, clearly darker than --os-overlay (never
       shared with dialogs/drawers/panels; see TourOverlay.razor.css). */
    --os-tour-scrim: rgba(0, 0, 0, 0.72);
}

[data-theme="dark"],
[data-theme="default"][data-theme-mode="dark"] {
    /* Primary (lighter for contrast on dark bg) */
    --os-primary: #4a9eff;
    --os-primary-hover: #6db3ff;
    --os-primary-light: #1a2d4a;
    --os-primary-dark: #83c0ff;

    /* Gradient */
    --os-gradient-start: #0a1628;
    --os-gradient-end: #1a0a22;
    --os-gradient: linear-gradient(180deg, var(--os-gradient-start) 0%, var(--os-gradient-end) 100%);

    /* Accent */
    --os-accent: #6db3ff;
    --os-accent-hover: #4a9eff;

    /* Surfaces */
    --os-background: #0f0f17;
    --os-surface: #1a1a2e;
    --os-surface-variant: #242438;
    --os-surface-elevated: #222236;

    /* Text */
    --os-text-primary: #e8e8f0;
    --os-text-secondary: #a0a0b8;
    --os-text-tertiary: #6b6b80;
    --os-text-on-primary: #ffffff;
    --os-text-on-dark: #e8e8f0;

    /* Borders */
    --os-border: #2e2e44;
    --os-border-light: #242438;
    --os-border-focus: #4a9eff;

    /* Status */
    --os-success: #34d058;
    --os-success-light: #1a2e20;
    --os-error: #ff4d4d;
    --os-error-light: #2e1a1a;
    --os-warning: #ffb84d;
    --os-warning-light: #2e2a1a;
    --os-info: #4a9eff;

    /* Shadows */
    --os-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --os-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --os-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Star rating */
    --os-star-filled: #ffb84d;
    --os-star-empty: #3a3a50;

    /* Tab */
    --os-tab-active: #4a9eff;
    --os-tab-inactive: #a0a0b8;

    /* Overlay */
    --os-overlay: rgba(0, 0, 0, 0.6);
    --os-overlay-light: rgba(0, 0, 0, 0.3);
    --os-tour-scrim: rgba(0, 0, 0, 0.84);
}