:root {
    /* ================================
       Brand / Accent
    ================================= */

    --color-primary: #7c6cf2;
    --color-primary-dark: #6b5ce7;
    --color-primary-light: #211d3a;

    /* ================================
       Backgrounds
    ================================= */

    --color-bg: #0f1117;
    --color-surface: #171a23;
    --color-surface-muted: #1d212c;
    --color-surface-elevated: #222734;

    /* ================================
       Text
    ================================= */

    --color-text-primary: #f5f7fa;
    --color-text-secondary: #a7adba;
    --color-text-muted: #737a89;
    --color-text-white: #ffffff;

    /* ================================
       Borders
    ================================= */

    --color-border: #2a2f3b;
    --color-border-light: #222733;

    /* ================================
       Semantic Colors
    ================================= */

    --color-success: #35c98b;
    --color-warning: #e5a84b;
    --color-danger: #ef6262;
    --color-info: #5b9cf6;

    /* ================================
       Typography
    ================================= */

    --font-family:
        "Lora",
        Georgia,
        "Times New Roman",
        serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* ================================
       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;

    /* ================================
       Border Radius
    ================================= */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* ================================
       Shadows
    ================================= */

    --shadow-sm:
        0 1px 3px rgba(0, 0, 0, 0.18);

    --shadow-md:
        0 4px 12px rgba(0, 0, 0, 0.24);

    --shadow-lg:
        0 10px 30px rgba(0, 0, 0, 0.30);

    /* ================================
       Transitions
    ================================= */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}