:root {

    /* =========================
       COLOR SYSTEM
    ========================== */

    --color-bg: #ffffff;
    --color-bg-secondary: #f8fafc;

    --color-text: #0f172a;
    --color-text-muted: #64748b;

    --color-border: #e2e8f0;

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* =========================
       TYPOGRAPHY
    ========================== */

    --font-family: "Inter", system-ui, -apple-system, sans-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: 40px;
    --font-size-4xl: 56px;

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

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

    /* =========================
       SPACING SYSTEM
    ========================== */

    --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;
    --space-24: 96px;

    /* =========================
       BORDER RADIUS
    ========================== */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* =========================
       SHADOWS
    ========================== */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);

    /* =========================
       TRANSITIONS
    ========================== */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* =========================
       LAYOUT
    ========================== */

    --container-width: 1200px;

}