/* ==========================================================================
   base.css — Design tokens, reset y tipografía global
   ========================================================================== */

/* --- Design tokens --- */
:root {
    /* Colors */
    --color-bg-dark: #141b22;
    --color-bg-light: #f4f5f6;
    --color-bg-white: #ffffff;
    --color-teal: #25989d;
    --color-accent: #ccff66;
    --color-text-light: #ffffff;
    --color-text-dark: #141b22;
    --color-text-muted: #4a5568;
    --color-gray: #8892b0;
    --color-gray-soft: #9aa3b8;
    --color-border-light: rgba(20, 27, 34, 0.12);
    --color-border-dark: rgba(255, 255, 255, 0.1);
    --color-header-bg: rgba(20, 27, 34, 0.82);

    /* Typography */
    --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Inter Tight", "Montserrat", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

/* CJK font overrides — Inter Tight/Montserrat carry no CJK glyphs */
:lang(zh) {
    --font-body: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    --font-display: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

:lang(ja) {
    --font-body: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    --font-display: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

:lang(ko) {
    --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    --font-display: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

:lang(hi) {
    --font-body: "Noto Sans Devanagari", "Mangal", "Arial Unicode MS", sans-serif;
    --font-display: "Noto Sans Devanagari", "Mangal", "Arial Unicode MS", sans-serif;
}

:lang(ar) {
    --font-body: "Noto Sans Arabic", "Tahoma", "Segoe UI", sans-serif;
    --font-display: "Noto Sans Arabic", "Tahoma", "Segoe UI", sans-serif;
}

:lang(he) {
    --font-body: "Noto Sans Hebrew", "Arial Hebrew", "David", sans-serif;
    --font-display: "Noto Sans Hebrew", "Arial Hebrew", "David", sans-serif;
}

/* Arabic & Hebrew are connected scripts — letter-spacing breaks glyph joins */
:lang(ar) *,
:lang(he) * {
    letter-spacing: 0 !important;
}

:root {

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 800;
    --fw-black: 900;

    /* Spacing scale */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    --space-2xl: 9rem;

    /* Layout */
    --container-max: 1480px;
    --section-padding-x: clamp(1.5rem, 4vw, 4rem);
    --section-padding-y: clamp(4rem, 8vw, 7rem);
    --header-height: 80px;

    /* Motion */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: 0.25s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.6s var(--ease-smooth);

    /* Elevation */
    --shadow-header: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --z-header: 100;
    --z-modal: 9999;
}

/* --- Reset moderno --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--color-text-light);
    background-color: var(--color-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-modal-open {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    line-height: 1.1;
}

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

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul {
    list-style: none;
}

/* --- Layout utilities --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

.container-fluid {
    width: 100%;
    max-width: 720px;
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}