@import "./colors.css";
@import "./typography.css";
@import "./spacing.css";
@import "./radius.css";
@import "./shadows.css";
@import "./motion.css";

:root {
    /* --- COLORS --- */
    --black-darker: #121212;
    --black-normal: #2e2e2e;
    --yellow-normal: #fff55f;
    --white-normal: #e9ebf8;
    --white-light: #fdfdfe;

    /* --- FONT FAMILIES --- */
    --font-primary: 'Sora', sans-serif; /* Actualizado: Sora */
    --font-secondary: 'Instrument Serif', serif;

    /* --- FONT WEIGHTS --- */
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-regular: 400;
    --fw-light: 300;

    /* --- SEMANTIC TOKENS --- */
    --h1-size: 80px;
    --h1-lh: 88px;
    --h1-weight: var(--fw-medium);
    --h1-family: var(--font-primary);

    --h2-size: 64px;
    --h2-lh: 72px;
    --h2-weight: var(--fw-bold);
    --h2-family: var(--font-primary);

    --h3-size: 32px;
    --h3-lh: 40px;
    --h3-weight: var(--fw-bold);
    --h3-family: var(--font-primary);

    --body-size: 16px;
    --body-lh: 1.5;
    --body-weight: var(--fw-light);
    --body-family: var(--font-primary);

    /* --- PRIMITIVE SIZES --- */
    --size-xxs: 10px;
    --size-xs: 12px;
    --size-s: 14px;
    --size-m: 16px;
    --size-l: 24px;
    --size-xl: 32px;
    --size-2xl: 48px;
    --size-3xl: 64px;
    --size-4xl: 80px;
}

body {
    font-family: var(--font-primary);
    font-size: var(--body-size);
    line-height: var(--body-lh);
    color: var(--black-normal);
    font-weight: var(--body-weight);
    background-color: var(--white-light);
    -webkit-font-smoothing: antialiased; /* Sora se ve mejor con esto */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
}

/* Ejemplo de uso para la Instrument Serif (Secundaria) */
.display-serif {
    font-family: var(--font-secondary);
    font-weight: 400;
}


:root {
    /* --- FONT FAMILIES --- */
    --font-primary: 'Onest', sans-serif; /* Cambiado a Onest */
    --font-secondary: 'Instrument Serif', serif;

    /* --- FONT WEIGHTS (Ajustados para Onest) --- */
    --fw-black: 900;
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-regular: 400;
    --fw-light: 300;

    /* --- SEMANTIC TOKENS (Aplicando la nueva fuente) --- */
    --h1-family: var(--font-primary);
    --h2-family: var(--font-primary);
    --h3-family: var(--font-primary);
    --body-family: var(--font-primary);
    
    /* Nota: Onest es un poco más compacta horizontalmente que Sora, 
       lo que permite que los encabezados grandes se vean muy potentes. */
}

body {
    font-family: var(--font-primary);
    font-optical-sizing: auto; /* Optimización para Onest */
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em; /* Onest luce increíble con un tracking ligeramente cerrado en títulos */
}