/*
 * Molnify design tokens: the single source of truth for brand, palette, type, and spacing.
 */
:root {
    /* Tell the browser to style native UI (scrollbars, form controls, the select popup) to match. */
    color-scheme: light;

    /* Chrome: the black top bar and its white-on-black foreground. Themeable, but the same in every
       theme today, so no dark override. */
    --mui-color-header-bg: #000;
    --mui-color-header-text: rgba(255, 255, 255, 0.7);
    --mui-color-header-border: rgba(255, 255, 255, 0.2);
    --mui-color-header-border-hover: rgba(255, 255, 255, 0.4);

    /* Brand */
    --mui-color-brand: #00acac;
    --mui-color-brand-strong: #00908f;
    --mui-color-brand-tint: #e6f6f6;

    /* Secondary: a distinct accent for when two actions sit close and must be told apart. */
    --mui-color-secondary: #3f51b5;
    --mui-color-secondary-strong: #303f9f;

    /* Molnify cell roles: the standard Excel fills Molnify reads */
    --mui-role-input: #00b050;
    --mui-role-output: #ff0000;
    --mui-role-chart: #0070c0;
    --mui-role-action: #ffff00;
    --mui-role-metadata: #7030a0;

    /* Text: a darkness ramp from primary body text down to the faintest icons. */
    --mui-color-text: #1f2933;
    --mui-color-heading: #11212b;
    --mui-color-text-secondary: #4d5662;
    --mui-color-text-muted: #61707d;
    --mui-color-text-subtle: #8d98a6;
    --mui-color-text-faint: #bfc8d3;
    --mui-color-text-inverse: #ffffff;

    /* Surfaces */
    --mui-color-bg: #ffffff;
    --mui-color-surface: #ffffff;
    --mui-color-surface-alt: #f6f8fa;
    --mui-color-surface-hover: #eceff3;
    --mui-color-surface-selected: #e3e8ee;
    --mui-color-border: #e3e8ee;
    --mui-color-border-strong: #d2dae3;
    --mui-color-control-disabled: #bfc8d3;
    --mui-color-code-bg: #eef3f3;
    --mui-color-code-text: #0b5c5c;
    /* Fenced code block: dark in every theme. */
    --mui-color-codeblock-bg: #0f2b2b;
    --mui-color-codeblock-text: #e6f6f6;

    /* Feedback */
    --mui-color-info: #4b6477;
    --mui-color-tip: #00908f;
    --mui-color-warning: #b7791f;

    /* Semantic status + interactive accents, shared so they're reused rather than re-picked. */
    --mui-color-danger: #b54a4a;
    --mui-color-danger-strong: #b3261e;
    --mui-color-danger-bg: #fcebea;
    --mui-color-success: #5a9b6a;
    --mui-color-success-strong: #1d7a4d;
    --mui-color-success-bg: #eaf7f0;
    --mui-color-pending: #c0a95a;
    --mui-color-focus: #9ab6e6;

    /* Cool neutral ramp: one grey family for the SPAs. */
    --mui-grey-50: #f6f8fa;
    --mui-grey-100: #eceff3;
    --mui-grey-200: #e3e8ee;
    --mui-grey-300: #d2dae3;
    --mui-grey-400: #bfc8d3;
    --mui-grey-500: #8d98a6;
    --mui-grey-600: #6b7682;
    --mui-grey-700: #4d5662;
    --mui-grey-800: #2f3741;
    --mui-grey-900: #1f2933;

    /* Typography */
    --mui-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mui-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
    /* Type scale: a small, fixed set of steps; everything maps to these. */
    --mui-text-xs: 0.75rem;
    --mui-text-sm: 0.875rem;
    --mui-text-base: 16px;
    --mui-text-md: 1.125rem;
    --mui-text-lg: 1.25rem;
    --mui-text-xl: 1.5rem;
    --mui-text-2xl: 2.25rem;
    --mui-line-base: 1.6;

    /* Space + shape */
    --mui-space-1: 4px;
    --mui-space-2: 8px;
    --mui-space-3: 12px;
    --mui-space-4: 16px;
    --mui-space-5: 24px;
    --mui-space-6: 32px;
    --mui-space-7: 48px;
    --mui-radius: 10px;
    --mui-radius-sm: 6px;
    --mui-shadow-sm: 0 1px 2px rgba(17, 33, 43, 0.06), 0 1px 3px rgba(17, 33, 43, 0.08);
    --mui-shadow-md: 0 8px 24px rgba(17, 33, 43, 0.14);
    --mui-shadow-lg: 0 12px 40px rgba(17, 33, 43, 0.25);
}

/*
 * Dark theme: overrides the semantic (alias) tier only. The palette tier — grey ramp, brand,
 * Excel role fills, and the always-dark fenced code block — is intentionally left untouched.
 * A pre-paint script in each SPA's index.html stamps data-theme on <html> before first paint.
 */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Text: near-white cool ramp down to faint icons. */
    --mui-color-text: #e5eaef;
    --mui-color-heading: #f4f8fb;
    --mui-color-text-secondary: #b7c1cb;
    --mui-color-text-muted: #94a0ac;
    --mui-color-text-subtle: #707c88;
    --mui-color-text-faint: #525d68;

    /* Surfaces: sunken page < raised card < hover < selected. */
    --mui-color-bg: #12181e;
    --mui-color-surface: #1a222b;
    --mui-color-surface-alt: #0f151a;
    --mui-color-surface-hover: #222c37;
    --mui-color-surface-selected: #2b3742;

    /* Borders + disabled controls. */
    --mui-color-border: #29333d;
    --mui-color-border-strong: #3a4650;
    --mui-color-control-disabled: #39434d;

    /* Subtle brand tint (selected rows, callouts) as a dark teal wash. */
    --mui-color-brand-tint: #0e2b2a;

    /* Inline code. */
    --mui-color-code-bg: #1b2a2a;
    --mui-color-code-text: #74d1d1;

    /* Feedback: brightened foregrounds; the light "-bg" tints become dark washes. */
    --mui-color-info: #8fa6b8;
    --mui-color-tip: #1fb3b2;
    --mui-color-warning: #d8a441;
    --mui-color-danger: #e28585;
    --mui-color-danger-strong: #e0574d;
    --mui-color-danger-bg: #33201f;
    --mui-color-success: #74c08a;
    --mui-color-success-strong: #33ac6b;
    --mui-color-success-bg: #16271e;
    --mui-color-pending: #d3bd70;

    /* Deeper shadows against dark surfaces. */
    --mui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.6);
    --mui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
    --mui-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);
}