:root {
    /* Colors — neutral base. Override in main.css per project brand. */
    --color-bg:           #ffffff;
    --color-bg-muted:     #f8f8f8;
    --color-surface:      #ffffff;
    --color-border:       #e5e5e5;
    --color-border-soft:  #f0f0f0;

    --color-text:         #1a1a1a;
    --color-text-muted:   #666666;
    --color-text-soft:    #999999;

    --color-primary:      #111111;
    --color-primary-hover:#333333;
    --color-on-primary:   #ffffff;

    --color-success:      #16a34a;
    --color-success-bg:   #f0fdf4;
    --color-error:        #dc2626;
    --color-error-bg:     #fef2f2;
    --color-warning:      #d97706;
    --color-warning-bg:   #fffbeb;
    --color-info:         #1e40af;
    --color-info-bg:      #eff6ff;

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Type */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  36px;

    /* Radius */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow:    0 2px 8px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.10);

    /* Layout */
    --container-max: 1100px;
    --header-h:      56px;
}