/**
 * ═══════════════════════════════════════════════════════════════════════════
 * DARAJAERP DESIGN TOKENS v2.0
 * Enterprise-Grade Design System Foundation
 * BlueBridge Group - Connect, Control, Grow
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
    /* ─────────────────────────────────────────────────────────────────────────
       BRAND COLORS - DarajaERP Light Theme
       ───────────────────────────────────────────────────────────────────────── */
    --d-brand-ink: #010100;
    --d-brand-navy: #13203D;
    --d-brand-cyan: #009CD5;
    --d-brand-cyan-strong: #03A0D6;
    --d-brand-purple: #8A60C2;
    --d-brand-lilac: #B576B2;
    --d-brand-slate: #524574;

    /* RGB helpers (for rgba() usage) */
    --d-brand-ink-rgb: 1, 1, 0;
    --d-brand-navy-rgb: 19, 32, 61;
    --d-brand-slate-rgb: 82, 69, 116;
    --d-primary-500-rgb: 0, 156, 213;
    --d-primary-600-rgb: 3, 160, 214;
    --d-accent-500-rgb: 138, 96, 194;
    --d-teal-500-rgb: 181, 118, 178;
    --d-gray-200-rgb: 226, 232, 240;
    --d-bg-card-rgb: 255, 255, 255;
    
    /* Primary Action (Cyan) */
    --d-primary-50:  #E6F7FD;
    --d-primary-100: #C9EEFA;
    --d-primary-200: #A5E2F5;
    --d-primary-300: #7ACFEF;
    --d-primary-400: #3FBAE5;
    --d-primary-500: #009CD5;
    --d-primary-600: #03A0D6;
    --d-primary-700: #0878AD;
    --d-primary-800: #0A5E87;
    --d-primary-900: #0B3D5C;
    
    /* Accent (Purple) */
    --d-accent-50:  #F5F1FB;
    --d-accent-100: #E9DFF7;
    --d-accent-200: #D8C5F0;
    --d-accent-300: #C7ABE8;
    --d-accent-400: #B576B2;
    --d-accent-500: #8A60C2;
    --d-accent-600: #754EA5;
    --d-accent-700: #5E3F87;
    --d-accent-800: #483169;
    --d-accent-900: #32214B;
    
    /* Soft Accent (Lilac / Slate) */
    --d-teal-50:  #FBF6FB;
    --d-teal-100: #F4E9F4;
    --d-teal-200: #E9D3EA;
    --d-teal-300: #DAB7D8;
    --d-teal-400: #C99CC7;
    --d-teal-500: #B576B2;
    --d-teal-600: #A05D9D;
    --d-teal-700: #844A82;
    --d-teal-800: #6A3A6A;
    --d-teal-900: #4B274A;
    
    /* Success Green */
    --d-success-50:  #ECFDF5;
    --d-success-100: #D1FAE5;
    --d-success-200: #A7F3D0;
    --d-success-300: #6EE7B7;
    --d-success-400: #34D399;
    --d-success-500: #10B981;
    --d-success-600: #059669;
    --d-success-700: #047857;
    --d-success-800: #065F46;
    --d-success-900: #064E3B;
    
    /* Warning Amber */
    --d-warning-50:  #FFFBEB;
    --d-warning-100: #FEF3C7;
    --d-warning-200: #FDE68A;
    --d-warning-300: #FCD34D;
    --d-warning-400: #FBBF24;
    --d-warning-500: #F59E0B;
    --d-warning-600: #D97706;
    --d-warning-700: #B45309;
    --d-warning-800: #92400E;
    --d-warning-900: #78350F;
    
    /* Danger Red */
    --d-danger-50:  #FEF2F2;
    --d-danger-100: #FEE2E2;
    --d-danger-200: #FECACA;
    --d-danger-300: #FCA5A5;
    --d-danger-400: #F87171;
    --d-danger-500: #EF4444;
    --d-danger-600: #DC2626;
    --d-danger-700: #B91C1C;
    --d-danger-800: #991B1B;
    --d-danger-900: #7F1D1D;
    
    /* Info Cyan */
    --d-info-50:  #ECFEFF;
    --d-info-100: #CFFAFE;
    --d-info-200: #A5F3FC;
    --d-info-300: #67E8F9;
    --d-info-400: #22D3EE;
    --d-info-500: #06B6D4;
    --d-info-600: #0891B2;
    --d-info-700: #0E7490;
    --d-info-800: #155E75;
    --d-info-900: #164E63;
    
    /* ─────────────────────────────────────────────────────────────────────────
       NEUTRAL COLORS - Slate Gray Scale
       ───────────────────────────────────────────────────────────────────────── */
    --d-gray-50:  #F7FAFC;
    --d-gray-100: #EEF2F6;
    --d-gray-200: #E2E8F0;
    --d-gray-300: #CBD5E1;
    --d-gray-400: #94A3B8;
    --d-gray-500: #64748B;
    --d-gray-600: #475569;
    --d-gray-700: #324152;
    --d-gray-800: #1D2735;
    --d-gray-900: #0F172A;
    
    /* ─────────────────────────────────────────────────────────────────────────
       SEMANTIC SURFACE COLORS
       ───────────────────────────────────────────────────────────────────────── */
    --d-bg-page: #F7FAFC;
    --d-bg-card: #FFFFFF;
    --d-bg-elevated: #FFFFFF;
    --d-bg-hover: #F1F5F9;
    --d-bg-active: #E2E8F0;
    --d-bg-sidebar: #FFFFFF;
    --d-bg-header: linear-gradient(135deg, var(--d-brand-navy) 0%, var(--d-primary-600) 45%, var(--d-accent-500) 100%);
    
    /* ─────────────────────────────────────────────────────────────────────────
       TEXT COLORS
       ───────────────────────────────────────────────────────────────────────── */
    --d-text-primary: #0B1220;
    --d-text-secondary: #475569;
    --d-text-tertiary: #64748B;
    --d-text-muted: #94A3B8;
    --d-text-inverse: #FFFFFF;
    --d-text-link: #009CD5;
    --d-text-link-hover: #03A0D6;
    
    /* ─────────────────────────────────────────────────────────────────────────
       BORDER COLORS
       ───────────────────────────────────────────────────────────────────────── */
    --d-border-light: #E2E8F0;
    --d-border-default: #CBD5E1;
    --d-border-strong: #94A3B8;
    --d-border-focus: #009CD5;
    
    /* ─────────────────────────────────────────────────────────────────────────
       TYPOGRAPHY
       ───────────────────────────────────────────────────────────────────────── */
    --d-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --d-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    
    --d-text-xs: 0.75rem;      /* 12px */
    --d-text-sm: 0.875rem;     /* 14px */
    --d-text-base: 1rem;       /* 16px */
    --d-text-lg: 1.125rem;     /* 18px */
    --d-text-xl: 1.25rem;      /* 20px */
    --d-text-2xl: 1.5rem;      /* 24px */
    --d-text-3xl: 1.875rem;    /* 30px */
    --d-text-4xl: 2.25rem;     /* 36px */
    --d-text-5xl: 3rem;        /* 48px */
    
    --d-font-light: 300;
    --d-font-normal: 400;
    --d-font-medium: 500;
    --d-font-semibold: 600;
    --d-font-bold: 700;
    
    --d-leading-tight: 1.25;
    --d-leading-normal: 1.5;
    --d-leading-relaxed: 1.75;
    
    /* ─────────────────────────────────────────────────────────────────────────
       SPACING
       ───────────────────────────────────────────────────────────────────────── */
    --d-space-0: 0;
    --d-space-1: 0.25rem;   /* 4px */
    --d-space-2: 0.5rem;    /* 8px */
    --d-space-3: 0.75rem;   /* 12px */
    --d-space-4: 1rem;      /* 16px */
    --d-space-5: 1.25rem;   /* 20px */
    --d-space-6: 1.5rem;    /* 24px */
    --d-space-8: 2rem;      /* 32px */
    --d-space-10: 2.5rem;   /* 40px */
    --d-space-12: 3rem;     /* 48px */
    --d-space-16: 4rem;     /* 64px */
    --d-space-20: 5rem;     /* 80px */
    
    /* ─────────────────────────────────────────────────────────────────────────
       BORDER RADIUS
       ───────────────────────────────────────────────────────────────────────── */
    --d-radius-none: 0;
    --d-radius-sm: 0.25rem;    /* 4px */
    --d-radius-md: 0.375rem;   /* 6px */
    --d-radius-lg: 0.5rem;     /* 8px */
    --d-radius-xl: 0.75rem;    /* 12px */
    --d-radius-2xl: 1rem;      /* 16px */
    --d-radius-3xl: 1.5rem;    /* 24px */
    --d-radius-full: 9999px;
    
    /* ─────────────────────────────────────────────────────────────────────────
       SHADOWS
       ───────────────────────────────────────────────────────────────────────── */
    --d-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --d-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --d-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --d-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --d-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --d-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --d-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    
    /* Colored Shadows for Cards */
    --d-shadow-primary: 0 4px 14px rgba(0, 156, 213, 0.25);
    --d-shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
    --d-shadow-warning: 0 4px 14px rgba(245, 158, 11, 0.25);
    --d-shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.25);
    --d-shadow-accent: 0 4px 14px rgba(138, 96, 194, 0.25);
    
    /* ─────────────────────────────────────────────────────────────────────────
       TRANSITIONS
       ───────────────────────────────────────────────────────────────────────── */
    --d-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --d-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --d-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --d-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ─────────────────────────────────────────────────────────────────────────
       Z-INDEX SCALE
       ───────────────────────────────────────────────────────────────────────── */
    --d-z-dropdown: 100;
    --d-z-sticky: 200;
    --d-z-fixed: 300;
    --d-z-modal-backdrop: 400;
    --d-z-modal: 500;
    --d-z-popover: 600;
    --d-z-tooltip: 700;
    --d-z-toast: 800;
    
    /* ─────────────────────────────────────────────────────────────────────────
       COMPONENT SPECIFIC TOKENS
       ───────────────────────────────────────────────────────────────────────── */
    
    /* Buttons */
    --d-btn-height-xs: 1.75rem;   /* 28px */
    --d-btn-height-sm: 2rem;      /* 32px */
    --d-btn-height-md: 2.5rem;    /* 40px */
    --d-btn-height-lg: 3rem;      /* 48px */
    
    /* Inputs */
    --d-input-height-sm: 2rem;    /* 32px */
    --d-input-height-md: 2.5rem;  /* 40px */
    --d-input-height-lg: 3rem;    /* 48px */
    
    /* Sidebar */
    --d-sidebar-width: 260px;
    --d-sidebar-collapsed-width: 72px;
    
    /* Header */
    --d-header-height: 64px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES (Optional)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --d-bg-page: #0B1220;
    --d-bg-card: #0F1A2A;
    --d-bg-elevated: #14233A;
    --d-bg-hover: #14233A;
    --d-bg-active: #0E2F3D;
    --d-bg-sidebar: #0F1A2A;
    --d-bg-header: linear-gradient(135deg, #123F51 0%, #0A202A 100%);
    
    --d-text-primary: #F8F9FA;
    --d-text-secondary: #D1D5DB;
    --d-text-tertiary: #9CA3AF;
    --d-text-muted: #6B7280;
    
    --d-border-light: #1F2A44;
    --d-border-default: #2B3A5E;
    --d-border-strong: #3B4E7A;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --d-transition-fast: 0ms linear;
        --d-transition-normal: 0ms linear;
        --d-transition-slow: 0ms linear;
        --d-transition-bounce: 0ms linear;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Font Family */
.d-font-sans { font-family: var(--d-font-sans); }
.d-font-mono { font-family: var(--d-font-mono); }

/* Text Colors */
.d-text-primary-color { color: var(--d-primary-600); }
.d-text-accent { color: var(--d-accent-600); }
.d-text-success { color: var(--d-success-600); }
.d-text-warning { color: var(--d-warning-600); }
.d-text-danger { color: var(--d-danger-600); }
.d-text-info { color: var(--d-info-600); }

/* Background Colors */
.d-bg-primary { background-color: var(--d-primary-500); }
.d-bg-accent { background-color: var(--d-accent-500); }
.d-bg-success { background-color: var(--d-success-500); }
.d-bg-warning { background-color: var(--d-warning-500); }
.d-bg-danger { background-color: var(--d-danger-500); }
.d-bg-info { background-color: var(--d-info-500); }

/* Gradient Backgrounds */
.d-gradient-primary {
    background: linear-gradient(135deg, var(--d-primary-500) 0%, var(--d-primary-700) 100%);
}
.d-gradient-accent {
    background: linear-gradient(135deg, var(--d-accent-500) 0%, var(--d-accent-700) 100%);
}
.d-gradient-success {
    background: linear-gradient(135deg, var(--d-success-500) 0%, var(--d-success-700) 100%);
}
.d-gradient-sunset {
    background: linear-gradient(135deg, var(--d-warning-500) 0%, var(--d-danger-500) 100%);
}
.d-gradient-cool {
    background: linear-gradient(135deg, var(--d-primary-500) 0%, var(--d-accent-500) 100%);
}

/* Shadows */
.d-shadow-sm { box-shadow: var(--d-shadow-sm); }
.d-shadow-md { box-shadow: var(--d-shadow-md); }
.d-shadow-lg { box-shadow: var(--d-shadow-lg); }
.d-shadow-xl { box-shadow: var(--d-shadow-xl); }

/* Border Radius */
.d-rounded { border-radius: var(--d-radius-lg); }
.d-rounded-xl { border-radius: var(--d-radius-xl); }
.d-rounded-2xl { border-radius: var(--d-radius-2xl); }
.d-rounded-full { border-radius: var(--d-radius-full); }

/* Transitions */
.d-transition { transition: all var(--d-transition-normal); }
.d-transition-fast { transition: all var(--d-transition-fast); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPATIBILITY ALIASES
   Maps unprefixed variable names to prefixed --d- tokens for legacy CSS files
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Primary */
    --primary-50: var(--d-primary-50);
    --primary-100: var(--d-primary-100);
    --primary-200: var(--d-primary-200);
    --primary-300: var(--d-primary-300);
    --primary-400: var(--d-primary-400);
    --primary-500: var(--d-primary-500);
    --primary-600: var(--d-primary-600);
    --primary-700: var(--d-primary-700);
    --primary-800: var(--d-primary-800);
    --primary-900: var(--d-primary-900);
    
    /* Accent */
    --accent-50: var(--d-accent-50);
    --accent-100: var(--d-accent-100);
    --accent-200: var(--d-accent-200);
    --accent-300: var(--d-accent-300);
    --accent-400: var(--d-accent-400);
    --accent-500: var(--d-accent-500);
    --accent-600: var(--d-accent-600);
    --accent-700: var(--d-accent-700);
    --accent-800: var(--d-accent-800);
    --accent-900: var(--d-accent-900);
    
    /* Success */
    --success-50: var(--d-success-50);
    --success-100: var(--d-success-100);
    --success-200: var(--d-success-200);
    --success-300: var(--d-success-300);
    --success-400: var(--d-success-400);
    --success-500: var(--d-success-500);
    --success-600: var(--d-success-600);
    --success-700: var(--d-success-700);
    --success-800: var(--d-success-800);
    --success-900: var(--d-success-900);
    
    /* Warning */
    --warning-50: var(--d-warning-50);
    --warning-100: var(--d-warning-100);
    --warning-200: var(--d-warning-200);
    --warning-300: var(--d-warning-300);
    --warning-400: var(--d-warning-400);
    --warning-500: var(--d-warning-500);
    --warning-600: var(--d-warning-600);
    --warning-700: var(--d-warning-700);
    --warning-800: var(--d-warning-800);
    --warning-900: var(--d-warning-900);
    
    /* Danger */
    --danger-50: var(--d-danger-50);
    --danger-100: var(--d-danger-100);
    --danger-200: var(--d-danger-200);
    --danger-300: var(--d-danger-300);
    --danger-400: var(--d-danger-400);
    --danger-500: var(--d-danger-500);
    --danger-600: var(--d-danger-600);
    --danger-700: var(--d-danger-700);
    --danger-800: var(--d-danger-800);
    --danger-900: var(--d-danger-900);
    
    /* Info */
    --info-50: var(--d-info-50);
    --info-100: var(--d-info-100);
    --info-200: var(--d-info-200);
    --info-300: var(--d-info-300);
    --info-400: var(--d-info-400);
    --info-500: var(--d-info-500);
    --info-600: var(--d-info-600);
    --info-700: var(--d-info-700);
    --info-800: var(--d-info-800);
    --info-900: var(--d-info-900);
    
    /* Gray */
    --gray-50: var(--d-gray-50);
    --gray-100: var(--d-gray-100);
    --gray-200: var(--d-gray-200);
    --gray-300: var(--d-gray-300);
    --gray-400: var(--d-gray-400);
    --gray-500: var(--d-gray-500);
    --gray-600: var(--d-gray-600);
    --gray-700: var(--d-gray-700);
    --gray-800: var(--d-gray-800);
    --gray-900: var(--d-gray-900);
    
    /* Teal */
    --teal-50: var(--d-teal-50);
    --teal-100: var(--d-teal-100);
    --teal-200: var(--d-teal-200);
    --teal-300: var(--d-teal-300);
    --teal-400: var(--d-teal-400);
    --teal-500: var(--d-teal-500);
    --teal-600: var(--d-teal-600);
    --teal-700: var(--d-teal-700);
    --teal-800: var(--d-teal-800);
    --teal-900: var(--d-teal-900);

    /* Typography */
    --text-xs: var(--d-text-xs);
    --text-sm: var(--d-text-sm);
    --text-base: var(--d-text-base);
    --text-lg: var(--d-text-lg);
    --text-xl: var(--d-text-xl);

    /* Border radius */
    --radius-sm: var(--d-radius-sm);
    --radius-md: var(--d-radius-md);
    --radius-lg: var(--d-radius-lg);
    --radius-xl: var(--d-radius-xl);
    --radius-2xl: var(--d-radius-2xl);
    --radius-full: var(--d-radius-full);

    /* Shadows */
    --shadow-xs: var(--d-shadow-xs);
    --shadow-sm: var(--d-shadow-sm);
    --shadow-md: var(--d-shadow-md);
    --shadow-lg: var(--d-shadow-lg);
    --shadow-xl: var(--d-shadow-xl);

    /* Transitions */
    --transition-fast: var(--d-transition-fast);
    --transition-normal: var(--d-transition-normal);
    --transition-slow: var(--d-transition-slow);
}