:root {
    --color-bg: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f4f8;

    --color-text: #16181d;
    --color-text-muted: #6b7280;

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

    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;

    --color-border: #e5e7eb;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    --shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 1px 6px rgba(0, 0, 0, 0.05);

    --shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.08);

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

    --content-width: 1320px;
}