:root {
    --theme-brand-name: "noAi Connect";
    --theme-color-primary: #A100A6;
    --theme-color-on-primary: #FFFFFF;
    --theme-color-secondary: #FE6D01;
    --theme-color-accent: #C55A11;
    --theme-color-background: #F8FAFC;
    --theme-color-surface: #FFFFFF;
    --theme-color-text: #111827;
    --theme-color-muted: #6B7280;
    --theme-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --theme-radius-base: 0.5rem;
    --color-primary: var(--theme-color-primary);
    --color-secondary: var(--theme-color-secondary);
    --color-accent: var(--theme-color-accent);
    --color-background: var(--theme-color-background);
    --color-surface: var(--theme-color-surface);
    --color-text: var(--theme-color-text);
    --color-text-muted: var(--theme-color-muted);
    --color-muted: color-mix(in srgb, var(--theme-color-muted) 12%, transparent);
    --color-border: color-mix(in srgb, var(--theme-color-muted) 30%, transparent);
    --color-app-primary: var(--theme-color-primary);
    --color-app-bg: var(--theme-color-background);
    --color-app-fg: var(--theme-color-text);
    --color-app-muted: var(--theme-color-muted);
    --color-app-surface: var(--theme-color-surface);
    --color-app-border: var(--color-border);
}

body {
    background: var(--theme-color-background);
    color: var(--theme-color-text);
    font-family: var(--theme-font-family);
}

.bg-theme-primary { background-color: var(--theme-color-primary); color: var(--theme-color-on-primary); }
.text-theme-primary { color: var(--theme-color-primary); }
.text-theme-muted { color: var(--theme-color-muted); }
.border-theme { border-color: color-mix(in srgb, var(--theme-color-muted) 30%, transparent); }
.card-theme { background: var(--theme-color-surface); color: var(--theme-color-text); border-radius: var(--theme-radius-base); }
.btn-theme-primary { background: var(--theme-color-primary); color: var(--theme-color-on-primary); border-radius: var(--theme-radius-base); }
.btn-theme-secondary { background: var(--theme-color-secondary); color: #ffffff; border-radius: var(--theme-radius-base); }
.btn-theme-ghost { color: var(--theme-color-text); border-radius: var(--theme-radius-base); }