:root {

/* ===================================
   PROFESSIONAL COLOR PALETTE (Modern Slate & Indigo)
=================================== */

--dt-primary: #4F46E5; /* Modern Indigo */
--dt-primary-hover: #4338CA;
--dt-primary-soft: rgba(79, 70, 229, 0.1);

--dt-secondary: #0EA5E9; /* Sky Blue */
--dt-secondary-hover: #0284C7;

--dt-accent: #F59E0B; /* Amber */

--dt-success: #10B981;
--dt-warning: #F59E0B;
--dt-danger: #EF4444;

--dt-white: #ffffff;

--dt-bg: #F8FAFC;
--dt-bg-card: #FFFFFF;
--dt-bg-light: #F1F5F9;

--dt-text-dark: #1E293B;
--dt-text-body: #475569;
--dt-text-muted: #94A3B8;

--dt-border: #E2E8F0;
--dt-input-border: #CBD5E1;
--dt-input-focus: #4F46E5;

/* ===================================
   ELEVATED SHADOWS
=================================== */

--dt-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--dt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--dt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--dt-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

/* ===================================
   GEOMETRIC RADII
=================================== */

--dt-radius-sm: 6px;
--dt-radius-md: 10px;
--dt-radius-lg: 16px;
--dt-radius-xl: 24px;

/* ===================================
   TRANSITIONS
=================================== */

--dt-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}