/* Fleep design tokens — from Figma Pages • Fleep Casino */
body.fleep-ui {
    --fleep-bg: #141415;
    --fleep-surface: #1D1E20;
    --fleep-elevated: #262628;
    --fleep-muted: #383C41;
    --fleep-text: #FFFFFF;
    --fleep-text-muted: #83898E;
    --fleep-text-dim: #3C3C45;
    --fleep-red: #D91000;
    --fleep-red-light: #F3372B;
    --fleep-red-dark: #AB2416;
    --fleep-gold: #C9A574;
    --fleep-border: rgba(255, 255, 255, 0.06);
    --fleep-border-strong: rgba(255, 255, 255, 0.1);
    --fleep-divider: #383C41;
    --fleep-panel-bg: #262628;
    --fleep-panel-hover: #2e3034;
    --fleep-active-bg: rgba(217, 16, 0, 0.14);
    --fleep-active-icon-bg: rgba(217, 16, 0, 0.22);
    --fleep-link: #AEB4BA;
    --fleep-radius-ui: 10px;
    --fleep-label-size: 11px;
    --fleep-body-size: 14px;
    --fleep-radius: 8px;
    --fleep-radius-lg: 12px;
    --fleep-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.2);
    --fleep-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
    --fleep-shadow-btn: 0 4px 4px rgba(0, 0, 0, 0.15);
    --fleep-sidebar-w: 240px;
    --fleep-sidebar-collapsed: 72px;
    --fleep-content-pad: 60px;
    --fleep-content-max: 1560px;
    --fleep-header-h: 72px;
    --fleep-header-inner-h: 48px;
    --fleep-header-guest: 72px;
    --fleep-header-auth: 72px;
    --fleep-header-catalog: 72px;
    --fleep-hero-h: 344px;
    --fleep-gap: 24px;
    --fleep-gap-sm: 16px;
    --fleep-gap-xs: 8px;
    --fleep-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --btn-primary: var(--fleep-red);
    --btn-primary-hover: var(--fleep-red-light);
    --accent: var(--fleep-red);
    --bg: var(--fleep-bg);
    --bg-elevated: var(--fleep-surface);
    --bg-card: var(--fleep-surface);
    --text: var(--fleep-text);
    --text-muted: var(--fleep-text-muted);
    --border: var(--fleep-border);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
    --fleep-bg: #F8F6F4;
    --fleep-surface: #FFFFFF;
    --fleep-elevated: #EEEDEB;
    --fleep-muted: #E4E2DE;
    --fleep-text: #1A1B1E;
    --fleep-text-muted: #5C6369;
    --fleep-text-dim: #8A9198;
    --fleep-border: rgba(0, 0, 0, 0.08);
    --fleep-border-strong: rgba(0, 0, 0, 0.12);
    --fleep-divider: #D8D6D2;
    --fleep-panel-bg: #FFFFFF;
    --fleep-panel-hover: #F2F1EF;
    --fleep-active-bg: rgba(217, 16, 0, 0.1);
    --fleep-active-icon-bg: rgba(217, 16, 0, 0.14);
    --fleep-link: #4A5056;
    --fleep-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.06);
    --fleep-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --fleep-shadow-btn: 0 2px 4px rgba(0, 0, 0, 0.08);
    --fleep-card-overlay-strong: rgba(255, 255, 255, 0.92);
    --bg: var(--fleep-bg);
    --bg-elevated: var(--fleep-surface);
    --bg-card: var(--fleep-surface);
    --text: var(--fleep-text);
    --text-muted: var(--fleep-text-muted);
    --border: var(--fleep-border);
    --surface: var(--fleep-surface);
    --hero-bg: var(--fleep-surface);
    --glass: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] body.fleep-ui {
    --fleep-bg: #F8F6F4;
    --fleep-surface: #FFFFFF;
    --fleep-elevated: #EEEDEB;
    --fleep-muted: #E4E2DE;
    --fleep-text: #1A1B1E;
    --fleep-text-muted: #5C6369;
    --fleep-text-dim: #8A9198;
    --fleep-border: rgba(0, 0, 0, 0.08);
    --fleep-border-strong: rgba(0, 0, 0, 0.12);
    --fleep-divider: #D8D6D2;
    --fleep-panel-bg: #FFFFFF;
    --fleep-panel-hover: #F2F1EF;
    --fleep-active-bg: rgba(217, 16, 0, 0.1);
    --fleep-active-icon-bg: rgba(217, 16, 0, 0.14);
    --fleep-link: #4A5056;
    --fleep-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.06);
    --fleep-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --fleep-shadow-btn: 0 2px 4px rgba(0, 0, 0, 0.08);
    --fleep-card-overlay-strong: rgba(255, 255, 255, 0.92);
    --bg: var(--fleep-bg);
    --bg-elevated: var(--fleep-surface);
    --bg-card: var(--fleep-surface);
    --text: var(--fleep-text);
    --text-muted: var(--fleep-text-muted);
    --border: var(--fleep-border);
    --surface: var(--fleep-surface);
    --hero-bg: var(--fleep-surface);
    --glass: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(0, 0, 0, 0.08);
}

body.fleep-ui {
    font-family: var(--fleep-font);
    background: var(--fleep-bg) !important;
    color: var(--fleep-text);
}

body.fleep-ui .fleep-ui-hidden {
    display: none !important;
}