/* 
    Sellnaudit Design Tokens 
    Visual Source of Truth: Quotation Registry 
*/

:root {
    /* Colors - Light Mode (Default) */
    --bg-primary: #F7F8FB;
    --bg-surface: #FFFFFF;
    --bg-surface-2: #FFFFFF;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --border: #E5E7EB;
    
    /* Accents */
    --accent-gold: #C9962E;
    --accent-gold-soft: rgba(201, 150, 46, 0.12);
    --accent-blue: #2563EB;
    --accent-blue-soft: rgba(37, 99, 235, 0.1);
    --accent-green: #16A34A;
    --accent-green-soft: rgba(22, 163, 74, 0.1);
    --accent-red: #DC2626;
    --accent-red-soft: rgba(220, 38, 38, 0.1);
    --accent-amber: #D97706;
    --accent-amber-soft: rgba(217, 119, 6, 0.1);
    --accent-gray: #6B7280;
    --accent-gray-soft: rgba(107, 114, 128, 0.1);

    /* Dimensions */
    --sidebar-width: 300px;
    --sidebar-width-slim: 80px;
    --topbar-height: 64px;
    
    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* Shadows - Premium Refined */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 24px 48px -8px rgba(0, 0, 0, 0.16);
    
    /* Transitions */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Tokens */
html.dark, [data-bs-theme="dark"] {
    --bg-primary: #0B1020;
    --bg-surface: #111827;
    --bg-surface-2: #162033;
    --text-primary: #E5E7EB;
    --text-secondary: #94A3B8;
    --border: #253149;
    
    /* Accents Dark */
    --accent-gold: #D4A83F;
    --accent-gold-soft: rgba(212, 168, 63, 0.15);
    --accent-blue: #3B82F6;
    --accent-blue-soft: rgba(59, 130, 246, 0.15);
    --accent-green: #22C55E;
    --accent-green-soft: rgba(34, 197, 94, 0.15);
    --accent-red: #EF4444;
    --accent-red-soft: rgba(239, 68, 68, 0.15);
    --accent-amber: #F59E0B;
    --accent-amber-soft: rgba(245, 158, 11, 0.15);
    --accent-gray: #94A3B8;
    --accent-gray-soft: rgba(148, 163, 184, 0.15);

    --shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.6);
}