/* ==========================================================================
   MINIMALIST MONOCHROME SAAS BENTO GRID DESIGN
   Fonts: Mali (Headings/Display) + Playpen Sans (Body/Content)
   ========================================================================== */

/* Background Grid Pattern (Night & Day Modes) */
html.dark .bg-grid-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

html:not(.dark) .bg-grid-pattern {
    background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Mouse Spotlight Gradient */
html.dark #spotlight {
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.035), transparent 75%);
}

html:not(.dark) #spotlight {
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 0, 0, 0.025), transparent 75%);
}

/* Day Mode Body & Theme Styles */
html:not(.dark) body {
    background-color: #f8f8fa !important;
    color: #18181b !important;
}

/* Bento Cards in Day Mode */
html:not(.dark) .bento-card {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: #e2e2e8 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .bento-card:hover {
    border-color: #a1a1aa !important;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Bento Card Hover & Micro-interactions */
.bento-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
    will-change: transform;
}

html.dark .bento-card {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

html.dark .bento-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.7);
}

html:not(.dark) .bento-card:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   HIGH-CONTRAST SEGMENTED THEME SWITCHER
   ========================================================================== */

/* Outer Button Container */
#theme-toggle {
    background-color: #f4f4f5;
    border-color: #d4d4d8;
}

html.dark #theme-toggle {
    background-color: #09090b !important;
    border-color: #3f3f46 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* 1. In Light Mode (Day Active) */
html:not(.dark) #btn-pill-day {
    background-color: #ffffff !important;
    color: #09090b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html:not(.dark) #btn-pill-night {
    background-color: transparent !important;
    color: #71717a !important;
}

/* 2. In Dark Mode (Night Active - Highly Visible Crisp Styling) */
html.dark #btn-pill-day {
    background-color: transparent !important;
    color: #71717a !important;
}

html.dark #btn-pill-night {
    background-color: #27272a !important;
    color: #ffffff !important;
    border: 1px solid #52525b !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Custom Minimalist Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html.dark ::-webkit-scrollbar-track {
    background: #0a0a0c;
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: #f1f1f4;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 9999px;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #c4c4cc;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #71717a;
}

/* Smooth Focus Rings */
a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}