@layer reset, theme, oxygen, composition, components, utilities;

/* --------------------------------------------------------------------------
   LAYER: RESET
   Normalización moderna (Andy Bell / Josh Comeau Hybrid)
   -------------------------------------------------------------------------- */
@layer reset {
    :where(*, *::before, *::after) {
        box-sizing: border-box;
        min-width: 0;
    }

    :where(html) {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    :where(body) {
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    :where(img, picture, video, canvas, svg) {
        display: block;
        max-width: 100%;
        height: auto;
        font-style: italic;
        vertical-align: middle;
        shape-margin: 0.75rem;
    }

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

    :where(p, h1, h2, h3, h4, h5, h6, a, figure, blockquote, dl, dd) {
        overflow-wrap: break-word;
        margin: 0;
    }

    :where(ul[class], ol[class], ul[role="list"], ol[role="list"]) {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    :where(table) {
        border-collapse: collapse;
        border-spacing: 0;
    }

    :where(hr) {
        margin: 0;
        border: 0;
        border-top: 1px solid currentColor;
    }

    :where(iframe) {
        border: 0;
    }
}

/* --------------------------------------------------------------------------
   LAYER: THEME
   Conexión de Tokens Semánticos -> Etiquetas HTML
   -------------------------------------------------------------------------- */
@layer theme {

    :where(html) {
        scrollbar-gutter: stable;
        /* UPDATED: Referencia correcta a raw.palette.neutral */
        scrollbar-color: var(--a-raw-palette-neutral-300) var(--a-surface);
        scrollbar-width: thin;
    }

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

    ::-webkit-scrollbar-track {
        background: var(--a-surface);
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--a-raw-palette-neutral-300);
        border-radius: 99px;
        border: 2px solid var(--a-surface);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--a-raw-palette-neutral-500);
    }

    /* --- CUERPO --- */
    :where(body) {
        background-color: var(--hg-surface);
        color: var(--hg-text-main);
        font-family: var(--hg-font-family-body);
        font-size: var(--hg-font-m);
        line-height: 1.5;

        transition:
            background-color var(--hg-duration-fast) var(--hg-motion-snappy),
            color var(--hg-duration-fast) var(--hg-motion-snappy);
    }

    /* --- HEADINGS --- */
    :where(h1, .h1) {
        font-family: var(--hg-font-family-heading);
        font-size: var(--hg-font-2xl);
        font-weight: 600;
        line-height: 1.2;
        text-wrap: balance;
    }

    :where(h2, .h2) {
        font-family: var(--hg-font-family-heading);
        font-size: var(--hg-font-xl);
        font-weight: 600;
        line-height: 1.2;
        text-wrap: balance;
    }

    :where(h3, .h3) {
        font-family: var(--hg-font-family-body);
        font-size: var(--hg-font-l);
        font-weight: 600;
        line-height: 1.3;
        text-wrap: balance;
    }

    :where(h4, h5, h6) {
        font-family: var(--hg-font-family-body);
        font-size: var(--hg-font-m);
        font-weight: 600;
    }

    /* --- PÁRRAFOS --- */
    :where(p) {
        max-width: 65ch;
        text-wrap: pretty;
    }

    /* --- LINKS --- */
    :where(a:not([class])) {
        color: var(--hg-brand);
        text-decoration: underline;
        text-decoration-skip-ink: auto;
        text-underline-offset: 3px;

        transition:
            color var(--hg-duration-fast) var(--hg-motion-snappy),
            text-decoration-color var(--hg-duration-fast) var(--hg-motion-snappy);
    }

    :where(a:not([class]):hover) {
        color: var(--hg-action-hover);
        text-decoration-thickness: 2px;
    }

    /* --- FOCUS --- */
    :where(:focus-visible) {
        outline: 2px solid var(--hg-brand);
        outline-offset: 2px;
        border-radius: 2px;
    }

    /* --- SELECTION --- */
    ::selection {
        background-color: var(--hg-brand);
        color: var(--hg-brand-on);
    }
}


/* --------------------------------------------------------------------------
   LAYER: OXYGEN / BREAKDANCE SETUP
   -------------------------------------------------------------------------- */
@layer oxygen {
    /* Wrapper nativo de Breakdance y Oxygen */
    :where(.bde-section-inner, .oxy-container, .ct-section-inner-wrap) {
        width: 100%;
        max-width: var(--hg-layout-max);
        padding-inline: var(--hg-padding-layout);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
    }

    /* --- ACCESSIBILITY SKIP LINK --- */
    .bde-skip-link, .skip-link, .oxy-skip-link {
        position: absolute;
        top: -9999px;
        left: -9999px;
        z-index: 99999;
        padding: 0.75rem 1.5rem;
        background: var(--a-brand);
        color: var(--a-brand-contrast);
        font-weight: 600;
        text-decoration: none;
        border-radius: var(--a-rad-btn);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .bde-skip-link:focus, .skip-link:focus, .oxy-skip-link:focus {
        top: 1rem;
        left: 1rem;
        position: fixed;
    }
}