/* ============================================================
 * base.css - tokens, reset, typography
 * Brand: Reino Chile (dark / elegant / masculine)
 * ========================================================= */

/* ====== TOKENS ====== */
:root {
    /* Color */
    --bg:           #1a1816;
    --bg-2:         #211f1c;
    --surface:      #272421;
    --surface-2:    #2f2c28;
    --border:       #3a352e;
    --border-soft:  #2a2622;
    --text:         #f1ede4;
    --text-soft:    #d6cfbf;
    --muted:        #8d8472;
    --muted-2:      #5f594d;
    --gold:         #e0b94a;  /* matches logo dominant gold */
    --gold-bright:  #f0d060;  /* logo highlight tone */
    --gold-deep:    #a8842a;  /* logo shadow tone */
    --danger:       #c93a3a;
    --success:      #5fa56a;

    --invert-bg:    #f4f1ea;
    --invert-text:  #14110d;

    /* Typography - Inter para todo (titulares y body), con tracking ancho en titulares para el feel "menu pero grande" */
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif:   var(--font-display); /* titulares: Inter peso medio con letter-spacing ancho */
    --font-script:  'Playfair Display', 'Times New Roman', serif; /* reservado para acentos cursivos futuros */
    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --space-xs:     .5rem;
    --space-sm:     1rem;
    --space-md:     1.5rem;
    --space-lg:     2.5rem;
    --space-xl:     4rem;
    --space-2xl:    6rem;

    /* Layout */
    --container:    1240px;
    --container-sm: 880px;

    /* Borders */
    --line-1:       1px solid var(--border);
    --line-gold:    1px solid var(--gold);
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    background-image:
        radial-gradient(ellipse at top, rgba(224,185,74,.06), transparent 55%),
        radial-gradient(ellipse at bottom, rgba(20,17,13,.25), transparent 60%);
    background-attachment: fixed;
}

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

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

button, input, select, textarea { font-family: inherit; font-size: 100%; }

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }

ul, ol { padding-left: 1.25rem; }

::selection { background: var(--gold); color: var(--bg); }

/* ====== TYPOGRAPHY ====== */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.8rem); letter-spacing: .14em; font-weight: 500; }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); letter-spacing: .16em; font-weight: 500; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: .22em; font-weight: 500; }
h4 { font-size: 1.15rem; letter-spacing: .15em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 600; }

p { margin: 0 0 1rem; }

.eyebrow {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}

.script {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--gold);
    letter-spacing: .25em;
    text-transform: uppercase;
    line-height: 1.2;
}

.text-muted { color: var(--muted); }
.text-gold  { color: var(--gold); }
.center     { text-align: center; }

hr.rule {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-lg) 0;
}

hr.rule--gold {
    border: 0;
    border-top: 1px solid var(--gold);
    width: 60px;
    margin: 1rem auto;
}