/**
 * Weavr Light Theme + theme toggle styles.
 *
 * Loaded on every page AFTER the page's own styles. The html[data-theme]
 * selector out-specifies each page's :root palette, so one override block
 * re-themes the whole app; /static/js/theme.js sets the attribute before
 * first paint and injects the toggle button.
 */

html[data-theme="light"] {
    /* Base */
    --background: #f2f5f9;
    --surface: #ffffff;
    --surface-light: #eaeff5;
    --surface-hover: #dfe6ef;

    /* Text */
    --text: #16202c;
    --text-secondary: #2c3a4a;
    --text-muted: #5d6c7e;
    --text-light: #8595a7;

    /* Powdr blue needs to darken for contrast on white; --secondary is only
       ever used as text on colored buttons, so it flips to white */
    --primary: #1f7fae;
    --primary-dark: #17638a;
    --primary-light: #d7ecf8;
    --primary-darker: #125070;
    --secondary: #ffffff;

    /* Selected nav item: the dark theme's translucent tint disappears on a
       white sidebar, so light mode gets a solid tint of the same hue */
    --nav-active-bg: #e3f1fa;
    --nav-active-fg: #125070;

    /* Borders and shadows */
    --border: #d5dde7;
    --border-dark: #bfcad8;
    --shadow-sm: 0 1px 2px rgba(23, 43, 66, 0.08);
    --shadow: 0 2px 4px rgba(23, 43, 66, 0.10);
    --shadow-md: 0 4px 8px rgba(23, 43, 66, 0.12);
    --shadow-lg: 0 8px 16px rgba(23, 43, 66, 0.16);

    /* Status colors darken slightly for text-on-light legibility */
    --success: #16a34a;
    --error: #dc2626;
    --warning: #b45309;
    --info: #1f7fae;

    color-scheme: light;
}

/* Component patches: spots where pages hardcode dark backgrounds */
html[data-theme="light"] .workflow-node {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(31, 127, 174, 0.35);
}

html[data-theme="light"] .workflow-preview {
    background: linear-gradient(180deg, rgba(31, 127, 174, 0.06), rgba(234, 239, 245, 0.7));
}

html[data-theme="light"] .version-changes {
    background: rgba(23, 43, 66, 0.06);
}

html[data-theme="light"] header {
    /* Sticky marketing/university headers use a translucent dark backdrop */
    background: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="light"] .modal {
    background: var(--surface);
}

/* Theme toggle button */
.theme-toggle {
    cursor: pointer;
    border: 1px solid var(--border, #333355);
    background: var(--surface-light, #252540);
    color: var(--text-muted, #a0a0b0);
    border-radius: 8px;
    width: 34px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: all 0.15s ease;
}

.theme-toggle:hover {
    color: var(--text, #ffffff);
    border-color: var(--primary, #6BBFEA);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Pages with a sidebar get the toggle beside the status indicator */
.theme-toggle.in-sidebar {
    margin-left: auto;
}

/* Pages without a sidebar (landing, login, account, ...) get a floating
   button bottom-left; bottom-right belongs to the PWA prompt and page
   widgets */
.theme-toggle.floating {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 1200;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}