/* Milos shared theme tokens.
   The --ui-* palette is copied from the Milos Controller frontend (controller-ui-theme skill,
   controller-frontend@96547442). The --band-* roles describe the dark brand panels that stay
   dark in both themes, matching the Controller login visual. Shared by every public page. */
:root {
    --ui-bg: #F6F4EF;
    --ui-surface: #FFFFFF;
    --ui-surface-muted: #EFECE4;
    --ui-ink: #123A3C;
    --ui-ink-muted: #5D6B6B;
    --ui-link: #286487;
    --ui-link-hover: #174C6A;
    --ui-info: #286487;
    --ui-info-bg: #EAF4F5;
    --ui-info-border: #C6DDE0;
    --ui-line: #E4E0D6;
    --ui-accent: #B5E655;
    --ui-success: #2B7044;
    --ui-success-bg: #E3F1E6;
    --ui-warning: #8A5800;
    --ui-warning-bg: #FBEFD6;
    --ui-warning-border: #EAD6AD;
    --ui-error: #B23A2E;
    --ui-error-bg: #F8E7E3;
    --ui-neutral: #5D6B6B;
    --ui-neutral-bg: #ECE9E1;
    --ui-hover: rgba(18, 58, 60, 0.04);
    --ui-input: #FFFFFF;
    --ui-input-border: #C9D2CC;
    --ui-disabled-bg: #EDF0EB;
    --ui-disabled-border: #D3DCD4;
    --ui-disabled-ink: #87958D;
    --ui-placeholder: #8A9694;
    --ui-selected: #E8F2EE;
    --ui-selected-hover: #DCEBE5;
    --ui-shadow: rgba(18, 58, 60, 0.14);
    --ui-strong: #123A3C;
    --ui-on-strong: #FFFFFF;
    --ui-focus-ring: rgba(18, 58, 60, 0.2);

    /* Site roles layered on the Controller palette. */
    --site-kicker: #2B7044;
    --site-ink-subtle: #5F6B69;
    --site-header-glass: rgba(246, 244, 239, 0.94);
    --site-shadow-soft: rgba(18, 58, 60, 0.05);
    --site-shadow-lift: rgba(18, 58, 60, 0.1);

    /* Dark brand panels: hero, dark sections, footer. Same appearance in both themes. */
    --band-bg: #0E1B1A;
    --band-bg-deep: #0A1413;
    --band-surface: rgba(230, 238, 234, 0.04);
    --band-surface-strong: rgba(12, 32, 30, 0.86);
    --band-line: rgba(230, 238, 234, 0.1);
    --band-line-strong: rgba(230, 238, 234, 0.2);
    --band-ink: #F5FFF9;
    --band-ink-soft: #E5F2EC;
    --band-ink-muted: #C8D5CF;
    --band-ink-subtle: #93A59F;
    --band-accent: #B5E655;
    --band-mint: #99F0B3;
    --band-info: #9DD3E0;
    --band-success: #8ED3A3;
    --band-glow: rgba(13, 130, 102, 0.36);
    --band-gradient:
        radial-gradient(ellipse at 44% 66%, rgba(13, 130, 102, 0.28), transparent 46%),
        linear-gradient(129deg, #062C2B 0%, #0C5249 64%, #053632 100%);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --ui-bg: #111A19;
    --ui-surface: #1A2524;
    --ui-surface-muted: #253130;
    --ui-ink: #E6EEEA;
    --ui-ink-muted: #A9B7B2;
    --ui-link: #8FCBA8;
    --ui-link-hover: #A7D9BA;
    --ui-info: #8CC9D9;
    --ui-info-bg: #173139;
    --ui-info-border: #355861;
    --ui-line: #2C3836;
    --ui-accent: #B5E655;
    --ui-success: #8ED3A3;
    --ui-success-bg: #1B3326;
    --ui-warning: #E9BC66;
    --ui-warning-bg: #352A12;
    --ui-warning-border: #765B2C;
    --ui-error: #F2978A;
    --ui-error-bg: #3A201C;
    --ui-neutral: #A9B7B2;
    --ui-neutral-bg: #253130;
    --ui-hover: #22302E;
    --ui-input: #233330;
    --ui-input-border: #5B756C;
    --ui-disabled-bg: #39413E;
    --ui-disabled-border: #4D5A54;
    --ui-disabled-ink: #A9B7B2;
    --ui-placeholder: #97A5A0;
    --ui-selected: #253D30;
    --ui-selected-hover: #2C4A38;
    --ui-shadow: rgba(0, 0, 0, 0.35);
    --ui-strong: #B5E655;
    --ui-on-strong: #123A3C;
    --ui-focus-ring: rgba(181, 230, 85, 0.22);

    --site-kicker: #B5E655;
    --site-ink-subtle: #8D9C97;
    --site-header-glass: rgba(17, 26, 25, 0.94);
    --site-shadow-soft: rgba(0, 0, 0, 0.2);
    --site-shadow-lift: rgba(0, 0, 0, 0.34);

    --band-bg: #0A1413;
    --band-bg-deep: #070F0E;

    color-scheme: dark;
}

.theme-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 10px;
    cursor: pointer;
    transition: background 220ms ease, border-color 220ms ease;
}

.theme-button:hover {
    border-color: color-mix(in srgb, currentColor 48%, transparent);
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.theme-button:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

.theme-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-button .theme-icon-sun,
:root[data-theme="dark"] .theme-button .theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-button .theme-icon-sun {
    display: block;
}