/* ═══════════════════════════════════════════════════════════════════
   app-theme.css

   Component-level tokens and base styles.
   This is the "theme layer" that applies tokens to base elements.

   Load AFTER all token files, BEFORE layout.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ THEME TRANSITION PROTECTION ═══════════════════════════════════
   Prevents flash/artifacts during theme switching.
   Applied by theme_controller.js during theme swap. */
.theme-switching,
.theme-switching * {
    transition: none !important;
    animation: none !important;
}

/* ══ FOCUS VISIBILITY — keyboard accessibility ════════════════════ */
@layer components {
    :focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
        border-radius: var(--radius-sm);
    }
}

/* ══ BODY BACKGROUND ══════════════════════════════════════════════ */
@layer components {
    body {
        background: var(--surface-bg);
        min-height: 100vh;
        color: var(--color-text-base);
        font-family: var(--font-family-sans);
        font-size: var(--font-size-base);
        line-height: 1.5;
    }
}

/* ══ SCROLLBAR STYLING ════════════════════════════════════════════ */
@layer utilities {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
        border-radius: var(--radius-full);
        border: 2px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
        background-clip: content-box;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent) transparent;
    }
}