@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../vendor/fonts/inter/Inter-Regular.46a1550a4bba.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../vendor/fonts/inter/Inter-Medium.60824932303e.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../../vendor/fonts/inter/Inter-SemiBold.01fdc3828f4e.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../vendor/fonts/inter/Inter-Bold.279e5a640385.woff2") format('woff2');
}

:root {
    --color-bg:           #F5F5F7;
    --color-surface:      #FFFFFF;
    --color-text:         #111111;
    --color-text-muted:   #5C5C5C;
    --color-border:       rgba(0, 0, 0, 0.08);
    --color-link:         #2563EB;
    --color-link-hover:   #1D4ED8;
    --color-accent:       #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-accent-soft:  rgba(37, 99, 235, 0.08);
    --color-error-code:   #111111;

    --color-status-live:   #15803D;
    --color-status-warn:   #B45309;
    --color-status-danger: #B91C1C;

    --color-datalayer:      #059669;
    --color-datalayer-bg:   rgba(5, 150, 105, 0.07);

    --color-success:        #16A34A;
    --color-success-bg:     #F0FDF4;
    --color-success-border: rgba(22, 163, 74, 0.2);
    --color-error:          #DC2626;
    --color-error-bg:       #FEF2F2;
    --color-error-border:   rgba(220, 38, 38, 0.2);
    --color-warning:        #D97706;
    --color-warning-bg:     #FFFBEB;
    --color-warning-border: rgba(217, 119, 6, 0.2);

    --color-input-bg:          #FFFFFF;
    --color-input-focus:       #2563EB;
    --color-btn-primary:       #2563EB;
    --color-btn-primary-hover: #1D4ED8;
    --color-btn-text:          #FFFFFF;
    --form-width: 480px;

    --bg-soft:  #FAFAFB;
    --bg-tint:  #F2F4F8;
    --bg-dark:  #0F1E35;
    --bg-code:  #0D1117;
    --code-text: #C9D1D9;
    --code-muted: rgba(201, 209, 217, 0.55);

    --kind-reg:    #6D28D9;
    --kind-prov:   #1D4ED8;
    --kind-casino: #047857;
    --kind-media:  #92400E;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                 'Liberation Mono', monospace;

    --font-size-xs:   12px;
    --font-size-sm:   14px;
    --font-size-base: 16px;
    --font-size-lg:   18px;
    --font-size-xl:   24px;
    --font-size-2xl:  28px;
    --font-size-3xl:  36px;
    --font-size-hero: 52px;
    --font-size-error: clamp(4rem, 15vw, 8rem);

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-card:     0 1px 2px rgba(15, 30, 53, 0.04), 0 1px 0 rgba(15, 30, 53, 0.03);

    --topbar-h:    60px;
    --max-narrow:  720px;
    --max-wide:    1200px;
    --max-content: 720px;
    --transition:  0.15s ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:           #0A0A0B;
        --color-surface:      #111113;
        --color-text:         #EDEDED;
        --color-text-muted:   #888888;
        --color-border:       rgba(255, 255, 255, 0.07);
        --color-link:         #60A5FA;
        --color-link-hover:   #93C5FD;
        --color-accent:       #3B82F6;
        --color-accent-hover: #60A5FA;
        --color-accent-soft:  rgba(59, 130, 246, 0.12);
        --color-error-code:   #EDEDED;

        --color-status-live:   #4ADE80;
        --color-status-warn:   #FCD34D;
        --color-status-danger: #F87171;

        --color-datalayer:      #34D399;
        --color-datalayer-bg:   rgba(52, 211, 153, 0.08);

        --color-success:        #4ADE80;
        --color-success-bg:     rgba(22, 163, 74, 0.1);
        --color-success-border: rgba(22, 163, 74, 0.3);
        --color-error:          #F87171;
        --color-error-bg:       rgba(220, 38, 38, 0.1);
        --color-error-border:   rgba(220, 38, 38, 0.3);
        --color-warning:        #FCD34D;
        --color-warning-bg:     rgba(217, 119, 6, 0.1);
        --color-warning-border: rgba(217, 119, 6, 0.3);

        --color-input-bg:          #1A1A1D;
        --color-input-focus:       #3B82F6;
        --color-btn-primary:       #3B82F6;
        --color-btn-primary-hover: #2563EB;

        --bg-soft:   #16161A;
        --bg-tint:   #1C1C22;
        --bg-dark:   #050D1A;
        --bg-code:   #0D1117;
        --code-text: #C9D1D9;
        --code-muted: rgba(201, 209, 217, 0.55);

        --kind-reg:    #A78BFA;
        --kind-prov:   #60A5FA;
        --kind-casino: #34D399;
        --kind-media:  #FBBF24;

        --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}