/* Sidaa Design System — canonical tokens (v2.1.1) */
:root {
    --sd-color-primary: #3b82f6;
    --sd-color-primary-soft: #eff6ff;
    --sd-color-success: #22c55e;
    --sd-color-success-soft: #ecfdf5;
    --sd-color-warning: #f97316;
    --sd-color-warning-soft: #fff7ed;
    --sd-color-danger: #ef4444;
    --sd-color-danger-soft: #fef2f2;
    --sd-color-info: #0ea5e9;
    --sd-color-bg: #f4f6fa;
    --sd-color-surface: #ffffff;
    --sd-color-surface-2: #fafbfc;
    --sd-color-text: #1e293b;
    --sd-color-muted: #64748b;
    --sd-color-border: #e8edf3;
    --sd-color-border-dashed: #d1dae6;

    --sd-space-0: 0;
    --sd-space-1: 4px;
    --sd-space-2: 8px;
    --sd-space-3: 12px;
    --sd-space-4: 16px;
    --sd-space-5: 20px;
    --sd-space-6: 24px;
    --sd-space-8: 32px;
    --sd-space-10: 40px;
    --sd-space-12: 48px;
    --sd-space-16: 64px;

    --sd-radius-sm: 8px;
    --sd-radius-md: 10px;
    --sd-radius-lg: 14px;
    --sd-radius-full: 9999px;

    --sd-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sd-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 24px rgba(15, 23, 42, 0.06);

    --sd-font-family: 'Vazirmatn', Tahoma, sans-serif;
    --sd-font-size-xs: 12px;
    --sd-font-size-sm: 13px;
    --sd-font-size-base: 14px;
    --sd-font-size-lg: 16px;
    --sd-font-size-xl: 20px;
    --sd-font-size-2xl: 24px;
    --sd-font-weight-normal: 400;
    --sd-font-weight-medium: 500;
    --sd-font-weight-semibold: 600;
    --sd-font-weight-bold: 700;
    --sd-line-height-tight: 1.35;
    --sd-line-height: 1.65;
    --sd-line-height-loose: 1.8;

    --sd-transition: 0.2s ease;
    --sd-opacity-disabled: 0.55;
    --sd-opacity-overlay: 0.45;

    --sd-layout-inner: 1360px;
    --sd-sidebar-width: 268px;
    --sd-topbar-height: 58px;
}

.panel-admin .sd-btn--primary,
.panel-member .sd-btn--primary {
    background: var(--sd-color-primary);
    border-color: var(--sd-color-primary);
    color: #fff;
}

.sd-card {
    background: var(--sd-color-surface);
    border: 1px solid var(--sd-color-border);
    border-radius: var(--sd-radius-lg);
    box-shadow: var(--sd-shadow-sm);
}

.sd-alert--success {
    background: var(--sd-color-success-soft);
    color: var(--sd-color-success);
    border-radius: var(--sd-radius-md);
    padding: var(--sd-space-3) var(--sd-space-4);
}