/* Janus Pro design tokens.
 *
 * Shared by base_optimizer.html (and the pages that extend it), the assignment
 * editor and solutions_page.css. Every colour in those views comes from here.
 *
 * Dark is the default (:root). Light applies under [data-theme="light"], which
 * static/js/theme.js sets on <html> before first paint. The sidebar stays dark
 * in both modes, so its tokens are not overridden in the light block.
 *
 * Orange (#FF5E1E) is never behind white text: filled orange uses --on-primary,
 * and orange used as text uses --primary-text.
 */

:root {
    color-scheme: dark;

    --sidebar-width: 240px;
    --header-height: 60px;

    --primary: #FF5E1E;
    --primary-dark: #EC5118;
    --primary-light: #FF8A57;
    --primary-text: #FF7A45;
    --on-primary: #0F0F0F;
    --primary-soft: rgba(255, 94, 30, .12);
    --primary-soft-text: #FF8A57;

    --success: #3DD68C;
    --success-dark: #2FB574;
    --on-success: #0F0F0F;
    --success-soft: rgba(61, 214, 140, .12);
    --success-soft-text: #5BE3A1;

    --warning: #F5C542;
    --warning-text: #F5C542;
    --on-warning: #0F0F0F;
    --warning-soft: rgba(245, 197, 66, .12);
    --warning-soft-text: #F5C542;

    --danger: #F2555A;
    --on-danger: #0F0F0F;
    --danger-soft: rgba(242, 85, 90, .12);
    --danger-soft-text: #FF8A8E;

    --info: #6BA6FF;
    --on-info: #0F0F0F;
    --info-soft: rgba(107, 166, 255, .12);
    --info-soft-text: #8DBBFF;

    --snowfruit: #9CC463;
    --snowfruit-soft: rgba(156, 196, 99, .14);
    --snowfox: #B98AF0;
    --snowfox-soft: rgba(185, 138, 240, .14);

    --sidebar-bg: #0A0A0A;
    --sidebar-border: rgba(255, 255, 255, .08);
    --sidebar-text: #ABA7A1;
    --sidebar-text-strong: #F5F2ED;
    --sidebar-muted: #6E6B67;
    --sidebar-hover: rgba(255, 255, 255, .04);
    --sidebar-active: rgba(255, 255, 255, .07);
    --sidebar-ok: #3DD68C;
    --sidebar-warning: #F5C542;

    --body-bg: #0F0F0F;
    --card-bg: #161616;
    --surface-sunken: #111111;
    --surface-raised: #1C1C1C;
    --surface-hover: #1E1E1E;
    --border: #262626;
    --border-strong: #3A3A3A;

    --text-primary: #F5F2ED;
    --text-secondary: #ABA7A1;
    --text-muted: #85817B;

    --pending-bg: rgba(255, 94, 30, .08);
    --pending-border: rgba(255, 94, 30, .45);

    --dots: rgba(255, 255, 255, .10);
    --glow: rgba(255, 94, 30, .16);
    --focus-ring: 0 0 0 3px rgba(255, 94, 30, .35);
    --overlay: rgba(0, 0, 0, .62);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Consumed by the editor's map.js to pick a basemap and marker outline. */
    --map-basemap: 'carto-darkmatter';
    --map-marker-outline: rgba(255, 255, 255, .65);
}

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

    --primary-text: #C2410C;
    --primary-soft: rgba(255, 94, 30, .10);
    --primary-soft-text: #C2410C;

    --success: #15803D;
    --success-dark: #166534;
    --on-success: #FFFFFF;
    --success-soft: rgba(21, 128, 61, .10);
    --success-soft-text: #166534;

    --warning-text: #A16207;
    --warning-soft: rgba(245, 197, 66, .22);
    --warning-soft-text: #854D0E;

    --danger: #DC2626;
    --on-danger: #FFFFFF;
    --danger-soft: rgba(220, 38, 38, .08);
    --danger-soft-text: #B91C1C;

    --info: #2563EB;
    --on-info: #FFFFFF;
    --info-soft: rgba(37, 99, 235, .08);
    --info-soft-text: #1D4ED8;

    --snowfruit: #4D7C0F;
    --snowfruit-soft: rgba(77, 124, 15, .10);
    --snowfox: #7E22CE;
    --snowfox-soft: rgba(126, 34, 206, .08);

    --body-bg: #F6F4F0;
    --card-bg: #FFFFFF;
    --surface-sunken: #F3F0EB;
    --surface-raised: #FFFFFF;
    --surface-hover: #F7F5F1;
    --border: #E7E2DA;
    --border-strong: #D6D0C6;

    --text-primary: #171717;
    --text-secondary: #57534E;
    --text-muted: #736D66;

    --pending-bg: #FFF4EC;
    --pending-border: #FDBA8C;

    --dots: rgba(15, 15, 15, .09);
    --glow: rgba(255, 94, 30, .10);
    --focus-ring: 0 0 0 3px rgba(255, 94, 30, .28);
    --overlay: rgba(23, 23, 23, .45);

    --shadow-sm: 0 1px 2px rgba(23, 23, 23, .05);
    --shadow-md: 0 6px 18px rgba(23, 23, 23, .08);
    --shadow-lg: 0 18px 40px rgba(23, 23, 23, .14);

    --map-basemap: 'open-street-map';
    --map-marker-outline: rgba(15, 23, 42, .55);
}