/* ==========================================================================
   BITY.FUN — Eye-Care Neo-Retro Editorial Theme System
   Tactile Gaming Archive Aesthetic with Zero Harsh Glare
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Palettes
   -------------------------------------------------------------------------- */

/* Default: Soft Warm Matte / Cozy Paper (Бережёт глаза, матовый, без слепящей белизны) */
:root, [data-theme="matte"], [data-theme="arcade"], [data-theme="famicom"] {
    --brand-primary: #2b58c9;
    --brand-primary-hover: #2045a3;
    --brand-accent: #ea580c;
    --brand-accent-hover: #c2410c;
    --brand-accent-glow: rgba(43, 88, 201, 0.12);
    --brand-badge-bg: rgba(43, 88, 201, 0.08);
    --brand-badge-border: rgba(43, 88, 201, 0.22);
    --brand-badge-text: #2b58c9;
    --bg-canvas: #e3e6eb;
    --bg-card: #f0f2f5;
    --bg-card-hover: #f7f9fb;
    --bg-subtle: #e5e8ed;
    --bg-muted: #dbe0e7;
    --border-card: #cad0d8;
    --border-card-hover: #9ca6b5;
    --border-strong: #b4bcc8;
    --text-primary: #151a22;
    --text-body: #3c4758;
    --text-muted: #6b7788;
    --dot-color: #cfd5de;
    --header-bg: rgba(240, 242, 245, 0.94);
}

/* Twilight / Dimmed Graphite (🌙 Приглушённый полумрак, идеален для ночи и тёмной темы) */
[data-theme="twilight"] {
    --brand-primary: #3b82f6;
    --brand-primary-hover: #2563eb;
    --brand-accent: #f97316;
    --brand-accent-hover: #ea580c;
    --brand-accent-glow: rgba(59, 130, 246, 0.15);
    --brand-badge-bg: rgba(59, 130, 246, 0.12);
    --brand-badge-border: rgba(59, 130, 246, 0.28);
    --brand-badge-text: #60a5fa;
    --bg-canvas: #12151b;
    --bg-card: #1a1f28;
    --bg-card-hover: #222834;
    --bg-subtle: #151921;
    --bg-muted: #242b38;
    --border-card: #28303e;
    --border-card-hover: #3d485c;
    --border-strong: #4d5b73;
    --text-primary: #e6edf5;
    --text-body: #a5b1c2;
    --text-muted: #687487;
    --dot-color: #232833;
    --header-bg: rgba(26, 31, 40, 0.94);
}

/* Vintage Game Boy DMG (📟 Оливковый винтажный карманный экран) */
[data-theme="gameboy"] {
    --brand-primary: #2d6622;
    --brand-primary-hover: #1f4a17;
    --brand-accent: #6b7850;
    --brand-accent-hover: #55603e;
    --brand-accent-glow: rgba(45, 102, 34, 0.12);
    --brand-badge-bg: rgba(45, 102, 34, 0.08);
    --brand-badge-border: rgba(45, 102, 34, 0.22);
    --brand-badge-text: #2d6622;
    --bg-canvas: #dce2cf;
    --bg-card: #ebf0de;
    --bg-card-hover: #f1f5e7;
    --bg-subtle: #d4dac5;
    --bg-muted: #c6cdaf;
    --border-card: #b2ba99;
    --border-card-hover: #8f9974;
    --border-strong: #78825c;
    --text-primary: #192b13;
    --text-body: #2f4325;
    --text-muted: #566a4c;
    --dot-color: #c4ccb2;
    --header-bg: rgba(235, 240, 222, 0.94);
}

/* Classic PlayStation 1 (🎮 Аутентичный серый корпус PS1) */
[data-theme="playstation"] {
    --brand-primary: #284c94;
    --brand-primary-hover: #1c3870;
    --brand-accent: #4a5568;
    --brand-accent-hover: #374151;
    --brand-accent-glow: rgba(40, 76, 148, 0.12);
    --brand-badge-bg: rgba(40, 76, 148, 0.08);
    --brand-badge-border: rgba(40, 76, 148, 0.22);
    --brand-badge-text: #284c94;
    --bg-canvas: #d6d8dc;
    --bg-card: #e4e6ea;
    --bg-card-hover: #eceef2;
    --bg-subtle: #cdd0d6;
    --bg-muted: #c0c4cb;
    --border-card: #a9aeb8;
    --border-card-hover: #8c93a0;
    --border-strong: #747c8a;
    --text-primary: #191d24;
    --text-body: #363e4b;
    --text-muted: #646c7b;
    --dot-color: #bcc0c9;
    --header-bg: rgba(228, 230, 234, 0.94);
}

/* --------------------------------------------------------------------------
   2. Canvas Background & Typography
   -------------------------------------------------------------------------- */
body {
    background-color: var(--bg-canvas);
    background-image: radial-gradient(var(--dot-color) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    color: var(--text-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* --------------------------------------------------------------------------
   3. Eye-Care Glare-Free Surface Mappings
   -------------------------------------------------------------------------- */
/* Eliminate pure white card glare, map directly to theme card surface */
[data-theme] .bg-white,
[data-theme] .bg-white\/95,
[data-theme] .bg-white\/90,
[data-theme] .bg-white\/80 {
    background-color: var(--bg-card) !important;
}
[data-theme] .hover\:bg-white:hover {
    background-color: var(--bg-card-hover, var(--bg-card)) !important;
}
[data-theme] .focus\:bg-white:focus {
    background-color: var(--bg-card) !important;
}

/* Insets, subtle boxes, table headers */
[data-theme] .bg-slate-50 {
    background-color: var(--bg-subtle) !important;
}
[data-theme] .hover\:bg-slate-50:hover {
    background-color: var(--bg-subtle) !important;
}

/* Muted buttons, chips */
[data-theme] .bg-slate-100 {
    background-color: var(--bg-muted) !important;
}
[data-theme] .hover\:bg-slate-100:hover {
    background-color: var(--bg-subtle) !important;
}
[data-theme] .hover\:bg-slate-200:hover {
    background-color: var(--border-card) !important;
}

/* Borders */
[data-theme] .border-slate-100,
[data-theme] .border-slate-200 {
    border-color: var(--border-card) !important;
}
[data-theme] .hover\:border-slate-300:hover {
    border-color: var(--border-card-hover) !important;
}
[data-theme] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-card) !important;
}

/* Typography mappings for optimal readability */
[data-theme] .text-slate-900,
[data-theme] .text-slate-800 {
    color: var(--text-primary) !important;
}
[data-theme] .text-slate-700,
[data-theme] .text-slate-600 {
    color: var(--text-body) !important;
}
[data-theme] .text-slate-500,
[data-theme] .text-slate-400 {
    color: var(--text-muted) !important;
}
[data-theme] .hover\:text-slate-900:hover,
[data-theme] .hover\:text-slate-800:hover {
    color: var(--text-primary) !important;
}

/* Dark mode specific badge adaptations */
[data-theme="twilight"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}
[data-theme="twilight"] .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #34d399 !important;
}
[data-theme="twilight"] .bg-rose-50 {
    background-color: rgba(244, 63, 94, 0.12) !important;
    color: #fb7185 !important;
}
[data-theme="twilight"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
}
[data-theme="twilight"] .bg-sky-50 {
    background-color: rgba(14, 165, 233, 0.12) !important;
    color: #38bdf8 !important;
}
[data-theme="twilight"] .text-amber-900 {
    color: #fde68a !important;
}

/* --------------------------------------------------------------------------
   4. Tactile UI Components
   -------------------------------------------------------------------------- */
.header-glass {
    background: var(--header-bg, rgba(240, 242, 245, 0.94));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-card, #cad0d8);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-tactile {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-tactile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.btn-tactile:active {
    transform: translateY(1px);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.card-tactile {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-tactile:hover {
    background: var(--bg-card-hover, var(--bg-card));
    border-color: var(--border-card-hover);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.kbd-cap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-card);
    border-bottom: 2px solid var(--border-strong);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-card);
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--border-card-hover);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-in {
    animation: fadeInScale 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}