:root {
    /* Colors */
    --color-bg-base: #F8FAFC;
    --color-bg-surface: #FFFFFF;
    --color-border: #E2E8F0;

    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-text-on-primary: #FFFFFF;

    --color-text-main: #0F172A;
    --color-text-base: #FFFFFF;
    --color-text-muted: #64748B;

    /* Status Colors */
    --color-status-paid-bg: #DCFCE7;
    --color-status-paid-text: #166534;

    --color-status-pending-bg: #FEF3C7;
    --color-status-pending-text: #92400E;

    --color-status-error-bg: #FEE2E2;
    --color-status-error-text: #991B1B;

    --color-status-incomplete-bg: #F1F5F9;
    --color-status-incomplete-text: #475569;

    /* Spacing */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-6: 24px;
    --spacing-8: 32px;

    /* Typography */
    /* Fallback to system fonts if Inter isn't loaded yet, but we'll import it in style.css */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;

    /* Component Properties */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 14px;
    /* "Radius: 14px" from guide */

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --height-control: 44px;
    /* Buttons/Inputs */
}