/* ═══════════════════════════════════════════
   TAVO ŠAMPŪNAS — Shared Design Tokens
   Used by all tavosampunas-pages templates.
   ═══════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
    --cream:      #F4F1EB;
    --cream2:     #EDE9E0;
    --stone:      #D8D2C6;
    --ink:        #1A1714;
    --ink2:       #584F44;
    --ink3:       #8A7E72;
    --terra:      #7A4A28;
    --gold:       #96703E;
    --forest:     #2A3222;
    --night:      #1C1916;
    --warm-dark:  #2C2620;
    --line:       rgba(26,23,20,.07);
    --serif:      'Domine', Georgia, serif;
    --sans:       'Instrument Sans', sans-serif;
    --ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --ease2:      cubic-bezier(0.65, 0, 0.35, 1);
    --tk:         32px;   /* ticker height */
    --nv:         56px;   /* nav height */
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; cursor: default; }
img  { display: block; max-width: 100%; height: auto; }
a    { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ─── REVEAL ANIMATION ─── */
[data-r] {
    opacity: 0;
    transform: translateY(60px) scale(0.97);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
[data-r].vis { opacity: 1; transform: none; }
[data-r="2"] { transition-delay: .14s; }
[data-r="3"] { transition-delay: .28s; }
[data-r="4"] { transition-delay: .42s; }

/* ─── SHARED SECTION LABEL ─── */
.section-label {
    font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--terra); font-weight: 300;
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 36px;
}
.section-label::before { content: ''; width: 32px; height: 1px; background: var(--terra); opacity: .5; }

/* ─── SHARED BUTTON STYLES ─── */
.btn-dark {
    display: inline-flex; align-items: center; gap: 14px;
    background: var(--ink); color: var(--cream);
    font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 300;
    padding: 15px 34px; border-radius: 100px;
    transition: all .35s var(--ease);
}
.btn-dark:hover { background: var(--terra); gap: 18px; transform: translateY(-2px); }
.btn-dark svg { transition: transform .2s; }
.btn-dark:hover svg { transform: translateX(4px); }

.btn-light {
    display: inline-flex; align-items: center; gap: 16px;
    background: rgba(244,241,235,.92); color: var(--ink);
    font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 300;
    padding: 17px 40px; border-radius: 100px;
    transition: all .4s var(--ease);
}
.btn-light:hover { background: #fff; gap: 22px; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.15); }
.btn-light svg { transition: transform .3s var(--ease); }
.btn-light:hover svg { transform: translateX(3px); }

/* ─── PAGE TOP SPACER ─── */
.page-top { height: calc(var(--tk) + var(--nv)); }

@media (max-width: 960px) {
    :root { --nv: 50px; --tk: 28px; }
}