/* ============================================================
   TOKENS.CSS
   ============================================================ */

:root {
    /* ── CORES ──────────────────────────────── */
    --bg: #F4EFE7;
    --surface: #EDE7DC;
    --border: #D0C8B8;
    --primary: #C8553A;
    --primary-dk: #A33E28;
    --dark: #1C1814;
    --dark-soft: #2E2822;
    --muted: #7A7268;
    --accent: #7ABFAA;
    --white: #FAFAF7;

    /* ── TIPOGRAFIA ─────────────────────────── */
    --font-display: 'Syne', sans-serif;
    --font-body: 'Jost', sans-serif;

    /* ── ESCALAS TIPOGRÁFICAS ───────────────── */
    --text-hero: clamp(56px, 17vw, 210px);
    --text-h1: clamp(52px, 9vw, 96px);
    --text-h2: clamp(34px, 5vw, 54px);
    --text-h3: clamp(20px, 2.5vw, 26px);
    --text-body: clamp(15px, 1.4vw, 17px);
    --text-sm: 14px;
    --text-xs: 12px;

    /* ── ESPAÇAMENTOS ───────────────────────── */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 120px;
    --space-2xl: 160px;

    /* ── BORDAS ─────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ── TRANSIÇÕES ─────────────────────────── */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.18s;
    --dur-mid: 0.32s;
    --dur-slow: 0.6s;

    /* ── LAYOUT ─────────────────────────────── */
    --container: 1280px;
    --gutter: 80px;
    --header-h: 72px;
}

@media (max-width: 1024px) {
    :root {
        --gutter: 48px;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 24px;
        --space-xl: 80px;
    }
}

@media (max-width: 480px) {
    :root {
        --gutter: 20px;
        --space-xl: 64px;
    }
}