/* ==========================================================
   Motionless Travelers - Design Tokens
   ========================================================== */

:root {
    /* Colors */
    --color-background: #10131a;
    --color-surface: #171b24;
    --color-surface-soft: #1d2330;
    --color-text: #f2eee5;
    --color-text-muted: #a9adba;
    --color-border: rgb(242 238 229 / 14%);
    --color-accent: #d6b77a;
    --color-accent-soft: #8d7550;
    --color-focus: #f0d39a;

    /* Typography */
    --font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-title: Georgia, "Times New Roman", serif;

    --font-size-xs: 0.78rem;
    --font-size-sm: 0.9rem;
    --font-size-base: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
    --font-size-lg: clamp(1.2rem, 1.08rem + 0.35vw, 1.5rem);
    --font-size-xl: clamp(1.9rem, 1.5rem + 1vw, 3rem);
    --font-size-2xl: clamp(3rem, 2rem + 4vw, 7rem);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Radius */
    --radius-sm: 0.35rem;
    --radius-md: 0.7rem;
    --radius-lg: 1.2rem;
    --radius-full: 9999px;

    /* Motion */
    --transition-fast: 160ms ease;
    --transition: 260ms ease;
    --transition-slow: 700ms cubic-bezier(.2, .75, .25, 1);

    /* Layout */
    --container-width: 1240px;
    --content-width: 820px;
    --header-height: 88px;
}