:root {
    /* Color */
    --color-bg: #17130f;
    --color-bg-2: #110e0b;
    --color-surface: #211b15;
    --color-surface-2: #2b241c;
    --color-surface-3: #342a20;
    --color-border: #3a3025;
    --color-border-strong: #5a4938;
    --color-text: #ede4d3;
    --color-muted: #b4a892;
    --color-subtle: #8a7c66;
    --color-accent: #d97b34;
    --color-accent-strong: #e89a4f;
    --color-accent-soft: rgba(217, 123, 52, 0.16);
    --color-accent-ink: #1a1206;
    --color-secondary: #4e8378;
    --color-secondary-soft: rgba(78, 131, 120, 0.18);
    --color-danger: #b8473c;
    --color-danger-soft: rgba(184, 71, 60, 0.18);
    --color-success: #7f9b57;
    --color-warning: #e0a458;

    /* Typography */
    --font-display: Rockwell, "Rockwell Extra Bold", Georgia, Cambria, serif;
    --font-body: Cambria, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --text-xs: 0.78rem;
    --text-sm: 0.92rem;
    --text-md: 1rem;
    --text-lg: 1.18rem;
    --text-xl: 1.42rem;
    --text-2xl: 1.72rem;
    --text-3xl: 2.08rem;
    --text-4xl: 2.6rem;
    --leading-tight: 1.12;
    --leading-normal: 1.55;
    --leading-loose: 1.75;
    --weight-regular: 400;
    --weight-medium: 600;
    --weight-bold: 700;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Radius */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    /* Layout and effects */
    --container: 1080px;
    --container-narrow: 420px;
    --header-height: 68px;
    --focus-ring: 0 0 0 3px var(--color-accent-soft), 0 0 0 1px var(--color-accent);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.36);
    --glow-accent: 0 0 32px rgba(217, 123, 52, 0.18);
    --transition: 160ms ease;
}