/*
 * Fichero: base.css
 * Descripción: Reset, configuración base de la tipografía y clases utilitarias de propósito general.
 * Principios: Rendimiento, Accesibilidad (Focus Ring).
*/

/* 1. Reset Básico (Normalize/Sanitize) */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* Respetar prefers-reduced-motion: reduce */
    transition: background-color var(--ptk-dur) var(--ptk-ease),
        color var(--ptk-dur) var(--ptk-ease),
        border-color var(--ptk-dur) var(--ptk-ease);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* 2. Configuración Global de HTML/Body */
html {
    font-family: var(--ptk-font-sans);
    /* Scroll suave para la navegación interna (si se desea) */
    scroll-behavior: smooth;
}

body {
    background-color: var(--ptk-color-surface);
    color: var(--ptk-color-text);
    font-size: var(--ptk-text-md);
    line-height: var(--ptk-leading-normal);
    min-height: 100vh;
    overflow-x: hidden;
    /* Previene scroll horizontal indeseado */
    margin: 0;
}

/* 3. Tipografía Base y Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--ptk-leading-tight);
    font-weight: var(--ptk-weight-semibold);
    margin-top: var(--ptk-space-10);
    margin-bottom: var(--ptk-space-4);
}

h1 {
    font-size: var(--ptk-text-3xl);
}

h2 {
    font-size: var(--ptk-text-2xl);
}

h3 {
    font-size: var(--ptk-text-xl);
}

h4 {
    font-size: var(--ptk-text-lg);
}

/* Utility classes for headings to allow overrides */
.ptk-heading-1 {
    font-size: var(--ptk-text-3xl);
    font-weight: var(--ptk-weight-bold);
}

.ptk-heading-2 {
    font-size: var(--ptk-text-2xl);
    font-weight: var(--ptk-weight-semibold);
}

.ptk-heading-3 {
    font-size: var(--ptk-text-xl);
    font-weight: var(--ptk-weight-semibold);
}

.ptk-heading-4 {
    font-size: var(--ptk-text-lg);
    font-weight: var(--ptk-weight-semibold);
}

.ptk-heading-5 {
    font-size: var(--ptk-text-base);
    font-weight: var(--ptk-weight-semibold);
}

/* 4. Enlaces y Foco Accesible */
a {
    color: var(--ptk-color-primary);
    text-decoration: none;
    cursor: pointer;
}

a:hover {}

/* Anillo de foco accesible para teclado (WCAG AA) */
:focus-visible {
    outline: 2px solid var(--ptk-color-focus);
    outline-offset: 3px;
    border-radius: var(--ptk-radius-xs);
    /* Opcional: Coincidir con radios de botones */
}

/* 5. Utilitarias de Texto y Visibilidad */
.ptk-text-muted {
    color: var(--ptk-color-text-muted) !important;
}

/* ... otras utilitarias de tipografía y pesos de fuente ... */

.ptk-visually-hidden {
    /* Oculta un elemento visualmente, pero lo mantiene para lectores de pantalla */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip Link: solo visible al recibir foco */
.ptk-skip-link {
    position: absolute;
    top: -40px;
    left: var(--ptk-space-4);
    background: var(--ptk-color-primary);
    color: white;
    padding: var(--ptk-space-2) var(--ptk-space-4);
    z-index: 1000;
    font-weight: var(--ptk-weight-semibold);
    border-radius: var(--ptk-radius-sm);
}

.ptk-skip-link:focus {
    top: var(--ptk-space-4);
}

/* ... otras utilitarias: .ptk-elev-*, .ptk-radius-*, .ptk-kbd ... */