[data-theme] strong {
    color: inherit;
}

[data-theme] body {
    background-color: var(--background);
    color: var(--text-primary);
}

[data-theme] .box {
    background-color: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--box-shadow, none);
}

[data-theme] .card {
    background-color: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--box-shadow, none);
}

[data-theme] .card-header {
    background-color: var(--card-header-bg, var(--surface-alt));
    box-shadow: none;
    border-bottom: 1px solid var(--card-header-border, var(--border));
}

[data-theme] .card-header-title {
    color: var(--card-header-title-color, var(--text-primary));
}

[data-theme] .title {
    color: var(--title-color, var(--text-primary));
}

[data-theme] .subtitle {
    color: var(--subtitle-color, var(--title-color, var(--text-primary)));
}

[data-theme] .has-text-grey {
    color: var(--grey-text-color, var(--text-secondary)) !important;
}

[data-theme] .media {
    border-top-color: var(--border);
}

[data-theme] .notification {
    background-color: var(--notification-bg, var(--surface-alt));
}

    [data-theme] .notification.is-primary {
        background-color: var(--notification-primary-bg, var(--primary));
        color: var(--notification-primary-text, var(--text-primary));
    }

    [data-theme] .notification.is-info {
        background-color: var(--notification-info-bg, var(--info));
        color: var(--notification-info-text, var(--text-primary));
    }

    [data-theme] .notification.is-success {
        background-color: var(--notification-success-bg, var(--success));
        color: var(--notification-success-text, var(--text-primary));
    }

    [data-theme] .notification.is-warning {
        background-color: var(--notification-warning-bg, var(--warning));
        color: var(--notification-warning-text, var(--text-primary));
    }

    [data-theme] .notification.is-danger {
        background-color: var(--notification-danger-bg, var(--danger));
        color: var(--notification-danger-text, var(--text-primary));
    }

        [data-theme] .notification.is-danger.is-light {
            background-color: var(--notification-danger-light-bg, var(--danger-light));
            color: var(--notification-danger-light-text, var(--text-primary));
        }

        [data-theme] .notification.is-info.is-light {
            background-color: var(--notification-info-light-bg, var(--info-light));
            color: var(--notification-info-light-text, var(--text-primary));
        }

[data-theme] .menu {
    background-color: var(--menu-bg, var(--surface));
}

[data-theme] .menu-list a {
    color: var(--menu-link-color, var(--text-primary));
}

    [data-theme] .menu-list a:hover {
        background-color: var(--menu-link-hover-bg, var(--surface-alt));
        color: var(--menu-link-hover-color, var(--text-primary));
    }

    [data-theme] .menu-list a.is-active {
        background-color: var(--menu-link-active-bg, var(--primary));
        color: var(--menu-link-active-color, var(--button-primary-text));
    }

[data-theme] .navbar {
    background-color: var(--navbar-bg, var(--surface));
    border-bottom: 1px solid var(--navbar-border, var(--border));
    box-shadow: var(--navbar-shadow, none);
}

[data-theme] .navbar-item,
[data-theme] .navbar-link {
    color: var(--navbar-item-color, var(--text-primary));
}

    [data-theme] .navbar-item:hover,
    [data-theme] .navbar-link:hover {
        background-color: var(--navbar-item-hover-bg, var(--surface-alt));
        color: var(--navbar-item-hover-color, var(--text-primary));
    }

/* Bulma styles a.navbar-item:focus from its own palette - #fafafa with its link
   blue - which is un-themed in every theme and near-white on the dark ones, so a
   keyboard user tabbing through the navbar landed on a white block with blue text.
   Focus takes the hover treatment, and :focus-visible adds a ring so the position
   is actually visible rather than merely tinted. */
[data-theme] .navbar-item:focus,
[data-theme] .navbar-item:focus-within,
[data-theme] .navbar-link:focus,
[data-theme] .navbar-link:focus-within {
    background-color: var(--navbar-item-hover-bg, var(--surface-alt));
    color: var(--navbar-item-hover-color, var(--text-primary));
}

[data-theme] .navbar-item:focus-visible,
[data-theme] .navbar-link:focus-visible {
    outline: 2px solid var(--navbar-item-color, var(--text-primary));
    outline-offset: -2px;
}

[data-theme] .navbar-dropdown {
    background-color: var(--navbar-dropdown-bg, var(--surface));
    border-color: var(--navbar-dropdown-border, var(--border));
    box-shadow: var(--navbar-dropdown-shadow, none);
}

    [data-theme] .navbar-dropdown .navbar-item {
        color: var(--navbar-dropdown-item-color, var(--text-primary));
    }

[data-theme] .navbar-divider {
    background-color: var(--navbar-divider-bg, var(--border));
}

[data-theme] .navbar-burger span {
    background-color: var(--navbar-burger-color, var(--navbar-item-color, var(--text-primary)));
}

[data-theme] input,
[data-theme] select,
[data-theme] textarea {
    background-color: var(--input-bg, var(--surface-alt));
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme] .theme-toggle {
    color: var(--navbar-item-color, var(--text-primary));
}

/* The toggle lives in the navbar, so it hovers like the navbar - not like a surface.
   --surface-alt is near-white in light-brand, which put a pale block on the slate
   navbar. Sharing --navbar-item-hover-bg also means the button and the .navbar-item
   wrapping it hover as one, rather than showing a lighter square inside a darker one. */
[data-theme] .theme-toggle:hover,
[data-theme] .theme-toggle:focus-visible {
    background-color: var(--navbar-item-hover-bg, var(--surface-alt));
    color: var(--navbar-item-hover-color, var(--text-primary));
}

/* Hovering the navbar-item that wraps the toggle should carry the icon with it. */
[data-theme] .navbar-item:hover .theme-toggle {
    color: var(--navbar-item-hover-color, var(--text-primary));
}

[data-theme] .label,
[data-theme] label {
    color: var(--label-color, var(--text-primary));
}

[data-theme] .help {
    color: var(--text-secondary);
}

[data-theme] input::placeholder,
[data-theme] textarea::placeholder {
    color: var(--input-placeholder-color, var(--text-secondary));
    opacity: var(--input-placeholder-opacity, 0.8);
}

[data-theme] .field-label .label {
    color: var(--text-primary);
}

[data-theme] .menu-label {
    color: var(--menu-label-color, var(--text-secondary));
}

[data-theme] input:focus,
[data-theme] select:focus,
[data-theme] textarea:focus,
[data-theme] input[type="date"]:focus {
    border-color: var(--primary, #ED6B19);
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--primary, #ED6B19) 22%, transparent);
}

[data-theme] .table {
    background-color: var(--table-bg, var(--surface));
    color: var(--table-text, var(--text-primary));
    border-collapse: collapse;
}

    [data-theme] .table thead th,
    [data-theme] .table thead td {
        background-color: var(--table-header-bg, var(--surface-alt));
        color: var(--table-header-text, var(--text-primary));
        border-bottom-color: var(--table-border, var(--border));
        border-color: var(--table-border, var(--border));
    }

    [data-theme] .table tbody tr {
        border-bottom-color: var(--border);
        background-color: transparent;
    }

    [data-theme] .table tbody td,
    [data-theme] .table tbody th {
        color: var(--table-cell-text, var(--text-primary));
        border-bottom-color: var(--table-border, var(--border));
        border-color: var(--table-border, var(--border));
    }

    [data-theme] .table.is-striped tbody tr:nth-child(even) {
        background-color: var(--table-striped-row) !important;
    }

    [data-theme] .table.is-hoverable tbody tr:hover,
    [data-theme] .table tbody tr:hover {
        background-color: var(--table-row-hover) !important;
    }

    [data-theme] .table.is-striped tbody tr:nth-child(even):hover {
        background-color: var(--table-row-hover-striped) !important;
    }

    [data-theme] .table:not(.is-striped) tbody tr:hover {
        background-color: var(--table-row-hover-soft) !important;
    }

[data-theme] .table-container {
    background-color: var(--table-container-bg, var(--surface));
    border: 1px solid var(--table-container-border, var(--border));
    border-radius: var(--radius-sm);
}

[data-theme] .table tfoot td,
[data-theme] .table tfoot th {
    background-color: var(--table-footer-bg, var(--surface-alt));
    color: var(--text-primary);
    border-top-color: var(--border);
}

[data-theme] .table.is-bordered td,
[data-theme] .table.is-bordered th {
    border-color: var(--border);
}

[data-theme] .table.is-fullwidth {
    width: 100%;
}

[data-theme] .table td a:not(.button),
[data-theme] .table th a:not(.button) {
    color: var(--table-link-color);
}

    [data-theme] .table td a:not(.button):hover,
    [data-theme] .table th a:not(.button):hover {
        color: var(--table-link-hover-color);
    }

[data-theme] .box-contrast {
    background-color: var(--box-contrast-bg);
    border: 1px solid var(--box-contrast-border);
}

[data-theme] .box .box-contrast {
    background-color: var(--box-contrast-bg);
}

[data-theme] .has-background-primary-light {
    background-color: var(--primary-light) !important;
    color: var(--text-primary) !important;
}

[data-theme] .has-background-info-light {
    background-color: var(--info-light) !important;
    color: var(--text-primary) !important;
}

[data-theme] .has-background-success-light {
    background-color: var(--success-light) !important;
    color: var(--text-primary) !important;
}

[data-theme] .has-background-warning-light {
    background-color: var(--warning-light) !important;
    color: var(--text-primary) !important;
}

[data-theme] .has-background-danger {
    background-color: var(--danger) !important;
    color: var(--text-primary) !important;
}

[data-theme] .section,
[data-theme] .hero,
[data-theme] .footer {
    background-color: var(--background);
    color: var(--text-primary);
}

[data-theme] .modal-card,
[data-theme] .panel,
[data-theme] .card-content {
    background-color: var(--surface);
    color: var(--text-primary);
}

[data-theme] .content,
[data-theme] .content p,
[data-theme] .content li {
    color: var(--text-secondary);
}

[data-theme] .input,
[data-theme] .textarea,
[data-theme] .select select {
    border-color: var(--border);
}