/* Theme toggle button styles */
.theme-toggle {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--fg-color, #333);
    background: var(--glass-bg-1, rgba(255, 255, 255, 0.8));
    color: var(--fg-color, #333);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, background 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/*
 * Force dark mode when data-theme="dark" regardless of system preference
 * Uses your accent color: hsl(311, 60%, 69%)
 */
:root[data-theme="dark"] {
    color-scheme: dark !important;

    /* Core colors */
    --bg-overlay: linear-gradient(rgba(0, 0, 0, var(--dim-opacity, 0.8)), rgba(0, 0, 0, var(--dim-opacity, 0.8))) !important;
    --fg-color: #fcfcfa !important;
    --fg-contrast: #29242a !important;
    --shade-color: rgba(0, 0, 0, 0.25) !important;

    /* Accent for dark mode - derived from hsl(311, 60%, 69%) */
    --accent-h: 311 !important;
    --accent-s: 60% !important;
    --accent-l: 69% !important;
    --accent-color: hsl(311, 60%, 69%) !important;

    /* Background color calculated for dark mode */
    --bg-color: hsl(311, 18%, 7%) !important;

    /* Glass backgrounds for dark */
    --glass-bg-1: hsla(311, 24%, 14%, 0.8) !important;
    --glass-bg-2: hsla(311, 24%, 10%, 0.9) !important;

    /* Foreground muted colors */
    --fg-muted-1: hsla(311, 60%, 97%, 0.6) !important;
    --fg-muted-2: hsla(311, 60%, 97%, 0.7) !important;

    /* Semantic colors - dark variants */
    --red-fg: hsl(345, 100%, 69%) !important;
    --orange-fg: hsl(20, 96%, 70%) !important;
    --yellow-fg: hsl(45, 100%, 70%) !important;
    --green-fg: hsl(90, 59%, 66%) !important;
    --blue-fg: hsl(186, 71%, 69%) !important;
    --purple-fg: hsl(250, 77%, 78%) !important;

    /* Neutral colors */
    --bg-muted-neutral-1: rgba(255, 255, 255, 0.1) !important;
    --bg-muted-neutral-2: rgba(255, 255, 255, 0.2) !important;
    --fg-muted-neutral-1: rgba(255, 255, 255, 0.6) !important;
    --fg-muted-neutral-2: rgba(255, 255, 255, 0.7) !important;

    /* Opacity */
    --scanlines-opacity: 1 !important;
    --fg-muted-1-opacity: 0.6 !important;
    --fg-muted-2-opacity: 0.7 !important;

    /* Edge highlight */
    --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/*
 * Force light mode when data-theme="light" regardless of system preference
 * Uses your accent color: hsl(311, 60%, 69%)
 */
:root[data-theme="light"] {
    color-scheme: light !important;

    /* Core colors */
    --bg-overlay: linear-gradient(rgba(255, 255, 255, var(--dim-opacity, 0.8)), rgba(255, 255, 255, var(--dim-opacity, 0.8))) !important;
    --fg-color: #29242a !important;
    --fg-contrast: #fcfcfa !important;
    --shade-color: rgba(0, 0, 0, 0.07) !important;

    /* Accent for light mode - derived from hsl(311, 60%, 69%) */
    --accent-h: 311 !important;
    --accent-s: 60% !important;
    --accent-l: 69% !important;
    --accent-color: hsl(311, 60%, 69%) !important;

    /* Background color calculated for light mode */
    --bg-color: hsl(311, 24%, 94%) !important;

    /* Glass backgrounds for light */
    --glass-bg-1: hsla(311, 18%, 97%, 0.8) !important;
    --glass-bg-2: hsla(311, 18%, 95%, 0.9) !important;

    /* Foreground muted colors */
    --fg-muted-1: hsla(311, 60%, 10%, 0.5) !important;
    --fg-muted-2: hsla(311, 60%, 10%, 0.6) !important;

    /* Semantic colors - light variants */
    --red-fg: hsl(342, 72%, 58%) !important;
    --orange-fg: hsl(16, 74%, 54%) !important;
    --yellow-fg: hsl(35, 91%, 42%) !important;
    --green-fg: hsl(154, 61%, 38%) !important;
    --blue-fg: hsl(192, 71%, 38%) !important;
    --purple-fg: hsl(254, 44%, 55%) !important;

    /* Neutral colors */
    --bg-muted-neutral-1: rgba(0, 0, 0, 0.1) !important;
    --bg-muted-neutral-2: rgba(0, 0, 0, 0.2) !important;
    --fg-muted-neutral-1: rgba(0, 0, 0, 0.5) !important;
    --fg-muted-neutral-2: rgba(0, 0, 0, 0.6) !important;

    /* Opacity */
    --scanlines-opacity: 0.4 !important;
    --fg-muted-1-opacity: 0.5 !important;
    --fg-muted-2-opacity: 0.6 !important;

    /* Edge highlight */
    --edge-highlight: inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}