/* ============================================================
   Design Tokens — Garba Admin Design System
   ============================================================ */
:root {
    /* Brand */
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --brand-primary-light: #eef2ff;
    --brand-accent: #f59e0b;
    --brand-accent-light: #fffbeb;

    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --sidebar-bg: #1a1d2e;
    --sidebar-bg-gradient: linear-gradient(180deg, #1a1d2e 0%, #16182a 100%);
    --sidebar-text: #a2a5b9;
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(99, 102, 241, 0.15);
    --sidebar-active-border: #6366f1;
    --sidebar-border: rgba(255, 255, 255, 0.06);

    /* Layout */
    --navbar-height: 68px;
    --content-bg: #f4f5fa;
    --card-bg: #ffffff;
    --footer-height: 52px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-heading: #0f172a;

    /* Borders & Shadows */
    --border-color: #e8ecf1;
    --border-radius: 14px;
    --border-radius-sm: 10px;
    --border-radius-xs: 6px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);

    /* Semantic */
    --color-success: #10b981;
    --color-success-light: #ecfdf5;
    --color-danger: #ef4444;
    --color-danger-light: #fef2f2;
    --color-warning: #f59e0b;
    --color-warning-light: #fffbeb;
    --color-info: #3b82f6;
    --color-info-light: #eff6ff;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}