/*
 * Higher-contrast Solidtime theme.
 * Components already consume these tokens, so this changes the full UI while
 * preserving Solidtime's spacing, typography, and brand colors.
 */

:root,
:root.light,
.light {
    color-scheme: light !important;

    /* Give the page, cards, controls, and selected states distinct planes. */
    --color-bg-background: #f1f3f5 !important;
    --color-bg-primary: #ffffff !important;
    --color-bg-secondary: #f8f9fa !important;
    --color-bg-tertiary: #e5e7eb !important;
    --color-bg-quaternary: #d1d5db !important;
    --color-bg-elevated: #ffffff !important;

    /* The quietest text/icon color still clears 4.5:1 on white. */
    --color-text-primary: #111318 !important;
    --color-text-secondary: #30343b !important;
    --color-text-tertiary: #525760 !important;
    --color-text-quaternary: #686e78 !important;

    --color-border-primary: #d2d5da !important;
    --color-border-secondary: #c4c8ce !important;
    --color-border-tertiary: #b4b9c1 !important;
    --color-border-quaternary: #979ea8 !important;
    --color-input-border-active: rgb(0 0 0 / 55%) !important;

    --theme-shadow-card: 0 1px 2px rgb(15 23 42 / 10%),
        0 4px 12px rgb(15 23 42 / 7%) !important;
    --theme-shadow-dropdown: 0 4px 8px rgb(15 23 42 / 12%),
        0 14px 32px rgb(15 23 42 / 14%) !important;
}

:root.dark,
.dark {
    color-scheme: dark !important;

    /* Wider lightness steps prevent dark panels from blending together. */
    --color-bg-background: #0d0f12 !important;
    --color-bg-primary: #17191d !important;
    --color-bg-secondary: #22252a !important;
    --color-bg-tertiary: #30343a !important;
    --color-bg-quaternary: #40454d !important;
    --color-bg-elevated: #292d33 !important;

    --color-text-primary: #fafafa !important;
    --color-text-secondary: #e4e7eb !important;
    --color-text-tertiary: #c0c5cd !important;
    --color-text-quaternary: #a1a8b2 !important;

    --color-border-primary: #373c43 !important;
    --color-border-secondary: #464c55 !important;
    --color-border-tertiary: #59616c !important;
    --color-border-quaternary: #6b7480 !important;
    --color-input-border-active: rgb(255 255 255 / 45%) !important;

    --theme-shadow-card: 0 1px 2px rgb(0 0 0 / 45%),
        0 5px 16px rgb(0 0 0 / 32%) !important;
    --theme-shadow-dropdown: 0 8px 18px rgb(0 0 0 / 55%),
        0 20px 44px rgb(0 0 0 / 45%) !important;
}

/* Make keyboard focus clear against both the lightest and darkest surfaces. */
:root:not(.dark) :focus-visible,
:root.light :focus-visible,
.light :focus-visible {
    outline: 2px solid #0369a1 !important;
    outline-offset: 2px !important;
}

:root.dark :focus-visible,
.dark :focus-visible {
    outline: 2px solid #7dd3fc !important;
    outline-offset: 2px !important;
}

@media (prefers-contrast: more) {
    :root,
    :root.light,
    :root.dark,
    .light,
    .dark {
        --theme-color-card-border: var(--color-border-tertiary) !important;
        --theme-color-input-border: var(--color-border-quaternary) !important;
    }
}