/* Approved sources: DESIGN_SYSTEM.md §2; component reference values stay with their variants. */
:root {
    --brand-purple: #711484;
    --brand-purple-600: #9551a3;
    --brand-purple-400: #b985c5;
    --brand-purple-200: #e4cee9;
    --brand-purple-50: #f8f2fa;
    --notification-unread: #f3e8f6;
    --brand-lilac: #a450af;
    --brand-lilac-400: #b875c1;
    --brand-lilac-300: #d2a6d8;
    --brand-lilac-100: #ebd8ee;
    --brand-lilac-50: #faf5fb;
    --brand-green: #339933;
    --brand-green-400: #60af60;
    --brand-green-300: #91ca91;
    --brand-green-100: #d4ead4;
    --brand-green-50: #f2f9f2;
    --brand-dark-green: #48803c;
    --brand-dark-green-400: #6a9a60;
    --brand-dark-green-300: #9dbe96;
    --brand-dark-green-100: #dae8d7;
    --brand-dark-green-50: #f4f8f2;
    --gradient-purple: linear-gradient(135deg, var(--brand-purple), var(--brand-lilac));
    --gradient-green: linear-gradient(135deg, var(--brand-green), var(--brand-dark-green));
    --gradient-purple-soft: linear-gradient(135deg, var(--brand-purple-50), var(--brand-lilac-100));
    --gradient-green-soft: linear-gradient(135deg, var(--brand-green-50), var(--brand-dark-green-100));
    --ink: #27192e;
    --muted: #6a5f72;
    --canvas: #f7f5f8;
    --surface: #fff;
    --surface-muted: #f2eef4;
    --border: #e2dbe6;
    --border-control: #cfc6d5;
    --border-card: #ece0ef;
    --danger: #b42318;
    --danger-soft: #fdecea;
    --success: #2f7a33;
    --success-soft: #e9f5e8;
    --warning: #8f5200;
    --warning-soft: #fff3d6;
    --info: #1d5fa8;
    --info-soft: #e6f0fa;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-menu: 10px;
    --radius-modal: 16px;
    --shadow-menu: 0 9px 26px #2f22372b;
    --shadow-modal: 0 8px 24px rgb(60 20 70 / 12%);
    --font-body: 14px;
    --font-label: 13px;
    --font-small: 12px;
    --font-title: 22px;
    --control-height: 40px;
    --button-height: 42px;
    --sidebar-width: 256px;
    --topbar-height: 60px;
    --purple: var(--brand-purple);
    --green: var(--brand-dark-green);
    --lilac: var(--brand-lilac);
    --bs-body-font-family: Tajawal, system-ui, sans-serif;
    --bs-body-font-size: var(--font-body);
    --bs-body-color: var(--ink);
    --bs-primary-rgb: 113, 20, 132;
    --bs-success-rgb: 51, 153, 51;
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-control);
    --bs-link-color: var(--brand-purple);
    --bs-link-hover-color: #5c0f6b;
}