/* ==========================================================================
   base.css — global element defaults
   --------------------------------------------------------------------------
   Adds global browser defaults and system hooks:
   - :focus-visible accent ring on all interactive elements
   - Custom dark scrollbar
   - Selection color
   - Reduced-motion / reduced-transparency hooks

   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Reset                                                                      */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    min-height: 100%;
    background: var(--neutral-1);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

[hidden] {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Focus ring — visible on keyboard nav, suppressed on mouse                  */
/* -------------------------------------------------------------------------- */

:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus {
    outline: none;
}

:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------- */
/* Selection color                                                            */
/* -------------------------------------------------------------------------- */

::selection {
    background: color-mix(in srgb, var(--accent-9) 40%, transparent);
    color: var(--neutral-12);
}

::-moz-selection {
    background: color-mix(in srgb, var(--accent-9) 40%, transparent);
    color: var(--neutral-12);
}

/* -------------------------------------------------------------------------- */
/* Scrollbar — dark, thin, hairline                                           */
/* -------------------------------------------------------------------------- */

@supports (scrollbar-width: thin) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--neutral-7) transparent;
    }
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--neutral-6);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-7);
    background-clip: padding-box;
}

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

/* -------------------------------------------------------------------------- */
/* Image / media defaults                                                     */
/* -------------------------------------------------------------------------- */

img, svg, video, canvas {
    display: block;
    max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Form elements: inherit font (browsers reset this)                          */
/* -------------------------------------------------------------------------- */

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* -------------------------------------------------------------------------- */
/* Reduced transparency: turn off all glass blur as a system-wide hook        */
/* (consumed by component files when they apply backdrop-filter)              */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
    :root {
        --blur-sm: none;
        --blur-md: none;
        --blur-lg: none;
        --scrim-blur: none;
        --surface-glass-1: var(--neutral-2);
        --surface-glass-2: var(--neutral-3);
        --surface-glass-3: var(--neutral-4);
    }
}