/* ==========================================================================
   system.css — tokens, fuentes, reset, base
   Play Arena Hub — capa de sistema (persona modular: un archivo, una capa)
   ========================================================================== */

/* -- fuentes self-hosted -------------------------------------------------- */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/ibm-plex-serif-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/ibm-plex-serif-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -- tokens ---------------------------------------------------------------- */
:root {
    /* color: superficies */
    --pah-bg: #232527;
    --pah-surface: #2c2f33;
    --pah-surface-2: #35393d;

    /* color: acentos */
    --pah-mint: #63dcb8;
    --pah-mint-dim: #3f9c85;
    --pah-mint-soft: rgba(99, 220, 184, 0.14);

    /* color: texto */
    --pah-silver: #e8eaec;
    --pah-silver-2: #aab0b5;
    --pah-ink: #141617;

    --accent-soft: #7fe6c6;

    /* tipografia */
    --pah-font-head: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --pah-font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

    /* radios: soft-organic 18-28px */
    --pah-radius-sm: 1.125rem;
    --pah-radius-md: 1.5rem;
    --pah-radius-lg: 1.75rem;
    --pah-radius-pill: 999px;

    /* sombras */
    --pah-shadow-soft: 0 20px 45px -25px rgba(0, 0, 0, 0.55);
    --pah-shadow-mint: 0 18px 40px -20px rgba(63, 156, 133, 0.45);

    /* layout */
    --pah-container: 74rem;
    --pah-gutter: clamp(1.25rem, 4vw, 2.5rem);

    /* z-index */
    --pah-z-header: 20;
    --pah-z-cookies: 40;
    --pah-z-menu: 50;
    --pah-z-skip: 60;

    /* motion */
    --pah-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p,
figure,
blockquote,
dl, dd {
    margin: 0;
}

ul[class],
ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

img {
    height: auto;
}

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

button {
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

/* -- base -------------------------------------------------------------------- */
body {
    background-color: var(--pah-bg);
    color: var(--pah-silver);
    font-family: var(--pah-font-body);
    font-size: 1rem;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

main {
    display: block;
}

.pah-container {
    width: min(100% - (var(--pah-gutter) * 2), var(--pah-container));
    margin-inline: auto;
}

/* -- accesibilidad ------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--pah-mint);
    outline-offset: 3px;
    border-radius: 0.35rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-to-main {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: var(--pah-z-skip);
    background-color: var(--pah-mint);
    color: var(--pah-ink);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: var(--pah-radius-sm);
    transition: top 0.2s var(--pah-ease);
}

.skip-to-main:focus {
    top: 1rem;
}

/* -- scrollbar delgado (contenedores con scroll nativo) ----------------------- */
.pah-thin-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--pah-mint) transparent;
}