/* Florida Digital Twin skin. Tokens from landing/src/styles/design-system.css.
   Dark is the default; patch_assets.py sets <html data-fldt-theme="light"> for
   users who turn off dark mode. */

:root {
    color-scheme: dark;
    --fldt-wash: #070d19;
    --fldt-panel: #0a1120;
    --fldt-input-bg: #070d19;
    --fldt-input-border: rgba(255, 255, 255, 0.12);
    --fldt-brand: #4b4ba0;
    --fldt-brand-hover: #5c5cb8;
    --fldt-on-brand: #ffffff;
    --fldt-text: #ffffff;
    --fldt-text-secondary: #d4d4d8;
    --fldt-border: rgba(255, 255, 255, 0.1);
    --fldt-card-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    --fldt-font: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-fldt-theme="light"] {
    color-scheme: light;
    --fldt-wash: #f1f3f8;
    --fldt-panel: #ffffff;
    --fldt-input-bg: #ffffff;
    --fldt-input-border: #d5dae4;
    --fldt-brand-hover: #3f3e8c;
    --fldt-text: #1c2333;
    --fldt-text-secondary: #4a5368;
    --fldt-border: #e3e6ee;
    --fldt-card-shadow: 0 8px 30px rgba(28, 35, 51, 0.08);
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}

html,
body,
#root {
    background-color: var(--fldt-wash) !important;
    color: var(--fldt-text);
}

body,
button,
input,
textarea,
select,
.ant-typography,
.ant-btn,
.ant-input,
.ant-select,
.ant-menu,
.ant-table,
.ant-modal,
.ant-drawer {
    font-family: var(--fldt-font);
}

code,
pre,
.ant-typography code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* Ant Design's primary color is compiled into DataHub's CSS, so fldt.json
   cannot reach it. */
.ant-btn-primary {
    background: var(--fldt-brand) !important;
    border-color: var(--fldt-brand) !important;

    &:hover,
    &:focus {
        background: var(--fldt-brand-hover) !important;
        border-color: var(--fldt-brand-hover) !important;
    }
}

.fldt-wordmark {
    color: var(--fldt-text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* The login page renders with DataHub's built-in theme, before a theme file
   loads, and plays a looping DataHub video behind the card. */
body:has(#username) {
    video {
        display: none !important;
    }

    #root > div,
    #root > div > div {
        background-color: var(--fldt-wash) !important;
        color: var(--fldt-text);
    }
}

/* DataHub injects `.ant-modal-content { background-color: white !important }`
   after this file, so these selectors need the extra `html body` weight. */
html body .ant-modal-content:has(#username) {
    background: var(--fldt-panel) !important;
    color: var(--fldt-text) !important;
    border: 1px solid var(--fldt-border) !important;
    box-shadow: var(--fldt-card-shadow) !important;

    .ant-modal-header,
    .ant-modal-body,
    .ant-modal-footer {
        background: var(--fldt-panel) !important;
        color: var(--fldt-text) !important;
        box-shadow: none;
        border: 0;
    }

    .ant-modal-header {
        border-bottom: 1px solid var(--fldt-border) !important;
    }

    .ant-modal-footer {
        border-top: 1px solid var(--fldt-border) !important;
    }

    p,
    .ant-modal-title * {
        color: var(--fldt-text-secondary) !important;
    }

    div:has(> input) {
        background: var(--fldt-input-bg) !important;
        border-color: var(--fldt-input-border) !important;
    }

    input {
        background: var(--fldt-input-bg) !important;
        color: var(--fldt-text) !important;
        border: 0 !important;
    }
}

html body [data-testid="sign-in"]:not(:disabled) {
    background: var(--fldt-brand) !important;
    border-color: var(--fldt-brand) !important;
    color: var(--fldt-on-brand) !important;

    &:hover {
        background: var(--fldt-brand-hover) !important;
    }
}