:root {
    /* Colors */
    --color-bg: #000000;
    --color-card: #1c1c1e;
    --color-text-primary: #ffffff;
    --color-text-secondary: #8e8e93;
    --color-accent: #0a84ff; /* iOS Blue */
    --color-danger: #ff453a; /* iOS Red */
    --color-success: #32d74b; /* iOS Green */
    --color-warning: #ffd60a; /* iOS Yellow */
    --color-separator: #38383a;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-s: 13px;
    --font-size-m: 17px;
    --font-size-l: 22px;
    --font-size-xl: 34px;

    /* Safe Area */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    
    /* Radius */
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 20px;
}

@media (prefers-color-scheme: light) {
    :root {
        --color-bg: #f2f2f7;
        --color-card: #ffffff;
        --color-text-primary: #000000;
        --color-text-secondary: #8e8e93;
        --color-separator: #c6c6c8;
    }
}