/*
 * EWA themes.
 * Every colour the app uses is a custom property defined here. To add a theme, copy one of the
 * [data-theme] blocks below, give it a new name, and add it to THEMES in wwwroot/js/theme.js
 * (plus an <option> in the theme picker). Bootstrap components follow data-bs-theme, which
 * theme.js sets to "dark" for dark themes and "light" otherwise.
 */

:root,
[data-theme="light"] {
    color-scheme: light;

    --ewa-bg: #f4f7f5;
    --ewa-bg-accent: radial-gradient(1200px 500px at 85% -10%, #d9f2e4 0%, transparent 60%),
                     radial-gradient(900px 400px at -10% 10%, #e6e3ff 0%, transparent 55%);
    --ewa-surface: #ffffff;
    --ewa-surface-2: #f7faf8;
    --ewa-border: #dfe7e2;
    --ewa-text: #17231d;
    --ewa-text-muted: #5b6b63;
    --ewa-heading: #0f1d16;

    --ewa-primary: #107c41;          /* Excel green */
    --ewa-primary-hover: #0c6434;
    --ewa-primary-soft: #e3f4ea;
    --ewa-on-primary: #ffffff;

    --ewa-accent: #5b4bdb;           /* functions */
    --ewa-accent-soft: #ecebff;
    --ewa-info: #0f6cbd;             /* references */
    --ewa-warn: #b25e00;             /* strings */
    --ewa-number: #a3367a;

    --ewa-sub-bg: #fff1c2;           /* static values that replaced a reference */
    --ewa-sub-text: #6a4800;
    --ewa-sub-border: #f1d27a;

    --ewa-danger: #c42b1c;
    --ewa-danger-soft: #fde7e4;
    --ewa-success: #107c41;

    --ewa-code-bg: #f3f6f4;
    --ewa-header-bg: rgba(255, 255, 255, 0.8);
    --ewa-shadow: 0 1px 2px rgba(16, 40, 28, 0.06), 0 8px 24px rgba(16, 40, 28, 0.06);
    --ewa-focus: 0 0 0 3px rgba(16, 124, 65, 0.3);
}

[data-theme="dark"] {
    color-scheme: dark;

    --ewa-bg: #0e1412;
    --ewa-bg-accent: radial-gradient(1200px 500px at 85% -10%, rgba(51, 196, 129, 0.12) 0%, transparent 60%),
                     radial-gradient(900px 400px at -10% 10%, rgba(140, 125, 255, 0.12) 0%, transparent 55%);
    --ewa-surface: #161e1b;
    --ewa-surface-2: #1b2521;
    --ewa-border: #2a3631;
    --ewa-text: #e3ebe7;
    --ewa-text-muted: #9aada4;
    --ewa-heading: #f3f8f5;

    --ewa-primary: #2fbf71;
    --ewa-primary-hover: #4fd08a;
    --ewa-primary-soft: rgba(47, 191, 113, 0.14);
    --ewa-on-primary: #06140c;

    --ewa-accent: #a99dff;
    --ewa-accent-soft: rgba(169, 157, 255, 0.15);
    --ewa-info: #6cb8ff;
    --ewa-warn: #f0b35e;
    --ewa-number: #f08ccb;

    --ewa-sub-bg: rgba(255, 200, 60, 0.16);
    --ewa-sub-text: #ffd77a;
    --ewa-sub-border: rgba(255, 200, 60, 0.35);

    --ewa-danger: #ff7b6b;
    --ewa-danger-soft: rgba(255, 123, 107, 0.14);
    --ewa-success: #2fbf71;

    --ewa-code-bg: #121a17;
    --ewa-header-bg: rgba(14, 20, 18, 0.8);
    --ewa-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --ewa-focus: 0 0 0 3px rgba(47, 191, 113, 0.35);
}