:root {
    /* Màu nền */
    --color-background: #080806;
    --color-background-soft: #11100c;
    --color-background-elevated: #191710;
    --color-background-card: rgba(24, 22, 15, 0.92);
    --color-background-glass: rgba(255, 255, 255, 0.05);

    /* Màu vàng chủ đạo */
    --color-primary: #f5c451;
    --color-primary-light: #ffe08a;
    --color-primary-dark: #b97a13;
    --color-primary-deep: #7c4b06;

    /* Màu chữ */
    --color-text: #f7f4e9;
    --color-text-soft: #c8c2ae;
    --color-text-muted: #898574;
    --color-text-dark: #17130a;

    /* Trạng thái */
    --color-success: #37d67a;
    --color-warning: #ffb020;
    --color-danger: #ff5f68;
    --color-info: #54a9ff;

    /* Đường viền */
    --color-border: rgba(245, 196, 81, 0.22);
    --color-border-strong: rgba(245, 196, 81, 0.55);
    --color-border-light: rgba(255, 255, 255, 0.08);

    /* Gradient */
    --gradient-primary: linear-gradient(
        135deg,
        #ffe08a 0%,
        #f5c451 40%,
        #b97a13 100%
    );

    --gradient-primary-hover: linear-gradient(
        135deg,
        #fff0b0 0%,
        #ffd86b 42%,
        #ce8e20 100%
    );

    --gradient-dark: linear-gradient(
        180deg,
        #17150f 0%,
        #080806 100%
    );

    --gradient-card: linear-gradient(
        145deg,
        rgba(45, 40, 25, 0.96),
        rgba(16, 15, 11, 0.98)
    );

    --gradient-hero: radial-gradient(
        circle at 65% 38%,
        rgba(245, 196, 81, 0.20),
        transparent 34%
    );

    /* Bóng */
    --shadow-small: 0 6px 18px rgba(0, 0, 0, 0.24);
    --shadow-medium: 0 16px 38px rgba(0, 0, 0, 0.38);
    --shadow-large: 0 26px 70px rgba(0, 0, 0, 0.52);

    --shadow-primary: 0 10px 30px rgba(245, 196, 81, 0.22);
    --shadow-primary-strong: 0 14px 40px rgba(245, 196, 81, 0.38);

    /* Kích thước bo góc */
    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 22px;
    --radius-extra-large: 32px;
    --radius-pill: 999px;

    /* Khoảng cách */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* Font */
    --font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 30px;
    --font-size-3xl: 42px;
    --font-size-4xl: 58px;

    /* Chiều rộng */
    --container-width: 1240px;
    --header-height: 78px;

    /* Chuyển động */
    --transition-fast: 160ms ease;
    --transition-normal: 260ms ease;
    --transition-slow: 450ms ease;

    /* Lớp hiển thị */
    --z-header: 100;
    --z-modal: 1000;
    --z-toast: 1100;
}