:root {
    /* COLORS */
    --ga-color-background: #0f172a;
    --ga-color-surface: #1e293b;
    --ga-color-surface-hover: #334155;
    --ga-color-border: #334155;
    --ga-color-primary: #2563eb;
    --ga-color-success: #22c55e;
    --ga-color-warning: #f59e0b;
    --ga-color-danger: #ef4444;
    --ga-color-text: #f8fafc;
    --ga-color-text-muted: #94a3b8;

    /* BORDER RADIUS */
    --ga-radius-sm: 6px;
    --ga-radius-lg: 18px;

    /* TRANSITIONS */
    --ga-transition-fast: .15s ease;
    --ga-transition: .20s ease;

    /* TABLE */
    --ga-table-cell-padding-y: .875rem;
    --ga-table-cell-padding-x: 1rem;

    /* SPACING */
    --ga-space-1: 4px;
    --ga-space-2: 8px;
    --ga-space-3: 12px;
    --ga-space-4: 16px;
    --ga-space-5: 20px;
    --ga-space-6: 24px;
    --ga-space-7: 32px;
    --ga-space-8: 40px;
    --ga-space-9: 48px;
    --ga-space-10: 64px;

    /* TYPOGRAPHY */
    --ga-font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    --ga-font-size-xs: 12px;
    --ga-font-size-sm: 14px;
    --ga-font-size: 16px;
    --ga-font-size-lg: 18px;
    --ga-font-size-xl: 22px;
    --ga-font-size-2xl: 28px;
    --ga-font-size-3xl: 36px;

    /* FONT WEIGHTS */
    --ga-font-light: 300;
    --ga-font-normal: 400;
    --ga-font-medium: 500;
    --ga-font-semibold: 600;
    --ga-font-bold: 700;

    /* AVATARS */
    --ga-avatar-small-size: 32px;
}