@layer tokens, themes, base, utilities;

@layer tokens {
    @supports not (color: oklch(50% 0.1 120)) {
        :root,
        :root[data-theme="light"] {
            --color-brand-primary: #edc010;
            --color-brand-primary-hover: #c99d00;
            --button-hover-line-color: rgba(237, 192, 16, .48);
            --color-brand-secondary: #252d42;

            --color-white: #fff;
            --color-black: #000;
            --color-neutral-50: #f8fafc;
            --color-neutral-100: #f5f5f5;
            --color-neutral-200: #e5e7eb;
            --color-neutral-300: #d1d5db;
            --color-neutral-400: #aeb6c1;
            --color-neutral-500: #8c96a3;
            --color-neutral-600: #64748b;
            --color-neutral-700: #475569;
            --color-neutral-800: #334155;
            --color-neutral-900: #1f2937;
            --color-neutral-950: #111827;

            --site-modal-backdrop-bg: rgba(0, 0, 0, .55);
            --color-border: rgba(0, 0, 0, .14);
            --color-link-hover: #6b7280;
            --color-disabled-fg: rgba(0, 0, 0, .55);

            --color-content-news: #287c96;
            --color-content-review: #c44c32;
            --color-content-article: #7342a8;
            --color-content-breaking: #dc2626;
            --color-content-liveblog: #16a34a;
            --color-content-dossier: #0f766e;

            --color-danger: #c62828;
            --color-danger-hover: #a91f1f;
            --color-success: #22c55e;
            --color-success-strong: #15803d;
            --color-accent-violet: #a855f7;
            --color-accent-indigo: #6366f1;
            --color-accent-indigo-hover: #a5b4fc;
            --btn-focus-ring: rgba(94, 109, 129, .35);
        }
    }

    @supports not (color: color-mix(in oklch, black 50%, white)) {
        :root,
        :root[data-theme="light"] {
            --color-brand-primary-hover: #c99d00;
            --button-hover-line-color: rgba(237, 192, 16, .48);
            --site-modal-backdrop-bg: rgba(0, 0, 0, .55);
            --color-border: rgba(0, 0, 0, .14);
            --color-link-hover: #6b7280;
            --color-disabled-fg: rgba(0, 0, 0, .55);
        }
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        :root {
            --site-background-blur: none;
            --color-bg-frosted: rgba(255, 255, 255, .95);
            --color-bg-frosted-strong: #fff;
            --color-bg-frosted-solid: #fff;
            --site-modal-backdrop-bg: rgba(0, 0, 0, .68);
        }
    }
}

@layer themes {
    @supports not (color: oklch(50% 0.1 120)) {
        :root[data-theme="dark"],
        [color-scheme="dark"] {
            --btn-disabled-bg: #3b414a;
            --btn-disabled-border: #596170;
            --btn-disabled-text: #9aa6b2;
            --btn-ghost-border: rgba(255, 255, 255, .35);
            --btn-ghost-hover-bg: rgba(255, 255, 255, .1);
            --btn-ghost-hover-border: rgba(255, 255, 255, .45);
            --btn-primary-hover-bg: #e5e7eb;
            --btn-primary-hover-border: #e5e7eb;
            --btn-secondary-bg: #3b414a;
            --btn-secondary-border: #596170;
            --btn-secondary-hover-bg: #4b5563;
            --btn-secondary-hover-border: #64748b;

            --color-bg: #242424;
            --color-bg-surface: #30333a;
            --color-bg-surface-alt: #3b414a;
            --color-border: rgba(255, 255, 255, .1);
            --color-text-muted: #cbd5e1;
            --color-text-soft: #aeb6c1;
            --color-ui-contrast-hover: #e5e7eb;
            --color-bg-surface-raised: #353941;
            --color-bg-surface-soft: rgba(37, 42, 50, .88);
            --color-bg-surface-translucent: rgba(44, 49, 58, .94);
            --color-bg-subtle-tint: #272d36;
            --color-bg-warning-soft: #433a1e;
            --color-bg-success-soft: #203d2b;
            --color-bg-chip: #383d46;
            --color-bg-chip-hover: #454b55;
            --color-bg-frosted: rgba(37, 42, 50, .84);
            --color-bg-frosted-strong: rgba(44, 49, 58, .9);
            --color-bg-frosted-solid: #343942;
            --color-text-header-control-muted: rgba(255, 255, 255, .72);
            --color-text-header-control-soft: rgba(255, 255, 255, .84);
            --comments-border: rgba(255, 255, 255, .14);
            --comments-border-strong: rgba(255, 255, 255, .22);
            --color-border-subtle: rgba(255, 255, 255, .1);
            --color-border-medium: rgba(255, 255, 255, .16);
            --color-card-bg: #222832;
            --color-card-bg-hover: #28313d;
            --color-card-header-bg: #252d38;
            --color-dropdown-bg: #232a35;
            --color-control-bg: #2b3340;
            --color-control-hover-bg: #343e4d;
        }
    }

    @supports not (color: color-mix(in oklch, black 50%, white)) {
        :root[data-theme="dark"],
        [color-scheme="dark"] {
            --btn-ghost-border: rgba(255, 255, 255, .35);
            --btn-ghost-hover-bg: rgba(255, 255, 255, .1);
            --btn-ghost-hover-border: rgba(255, 255, 255, .45);
            --color-border: rgba(255, 255, 255, .1);
            --color-bg-warning-soft: #433a1e;
            --color-bg-success-soft: #203d2b;
            --color-text-header-control-muted: rgba(255, 255, 255, .72);
            --color-text-header-control-soft: rgba(255, 255, 255, .84);
            --comments-border: rgba(255, 255, 255, .14);
            --comments-border-strong: rgba(255, 255, 255, .22);
            --color-border-subtle: rgba(255, 255, 255, .1);
            --color-border-medium: rgba(255, 255, 255, .16);
        }
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        :root[data-theme="dark"],
        [color-scheme="dark"] {
            --color-bg-frosted: #252a32;
            --color-bg-frosted-strong: #2c313a;
            --color-bg-frosted-solid: #343942;
            --site-modal-backdrop-bg: rgba(0, 0, 0, .78);
        }
    }
}

@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    @supports (scrollbar-gutter: stable) {
        html {
            scrollbar-gutter: stable;
        }
    }

    body {
        min-height: 100vh;
        min-height: 100svh;
    }

    @supports (min-height: 100dvh) {
        body {
            min-height: 100dvh;
        }
    }

    body.no-scroll {
        height: 100vh;
        height: 100svh;
    }

    @supports (height: 100dvh) {
        body.no-scroll {
            height: 100dvh;
        }
    }

    button,
    input,
    select,
    textarea,
    a[href],
    [role="button"] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    input,
    select,
    textarea {
        -moz-appearance: none;
        background-clip: padding-box;
    }

    input[type="search"] {
        -webkit-appearance: none;
    }

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    button::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner {
        padding: 0;
        border-style: none;
    }
}

@layer utilities {
    @supports (-moz-appearance: none) {
        :root {
            scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
            scrollbar-width: thin;
        }
    }

    @supports not (selector(:focus-visible)) {
        a:focus,
        button:focus,
        input:focus,
        select:focus,
        textarea:focus,
        [tabindex]:focus {
            outline: 0.125rem solid var(--color-brand-primary);
            outline-offset: var(--space-2);
        }
    }

    @supports not (text-wrap: balance) {
        .content-card__dossier-title,
        .listing-layout-card__title,
        .article-header__title {
            text-wrap: normal;
        }
    }

    @supports not (max-height: 100dvh) {
        .cookiebar {
            max-height: calc(100vh - var(--space-56));
        }

        @media (max-width: 768px) {
            .header-menu__more {
                max-height: 100vh;
            }
        }

        .bug-report-modal {
            max-height: min(90vh, 44rem);
        }

        @media (max-width: 640px) {
            .bug-report-modal {
                max-height: calc(100vh - var(--space-24));
            }
        }

        .admin-modal__dialog {
            max-height: calc(100vh - 2rem);
        }

        .admin-ubb-link-search-list .page-suggestion-list {
            max-height: clamp(12rem, calc(100vh - 26rem), 22rem);
        }

        #js-poll-search-list .page-suggestion-list {
            max-height: clamp(12rem, calc(100vh - 20rem), 22rem);
        }
    }
}