:root {
    /* Color Palette */
    --color-primary: #004CFF;       /* Cobalt Blue */
    --color-primary-hover: #0037B3;
    --color-secondary: #FFF1C5;     /* Warm Butter Yellow */
    --color-accent: #00D8FF;        /* Cyan Blue */
    
    --color-bg-pure: #FFFFFF;
    --color-bg-soft: #F9FAFB;
    --color-surface: #FFFFFF;
    --color-surface-soft: #F3F4F6;
    
    --color-text-main: #0F0F10;     /* Carbon Black */
    --color-text-muted: #6B7280;
    --color-text-white: #FFFFFF;
    
    --color-border: #E5E7EB;
    --color-border-dark: #D1D5DB;
    
    /* Layout & Roundings */
    --radius-default: 0px;          /* Rectangular Rounding */
    --radius-pill: 0px;           /* Pill-shaped Rounding */
    
    /* Shadows */
    --shadow-soft: 0 10px 30px -5px rgba(0, 76, 255, 0.05), 0 1px 3px rgba(0, 76, 255, 0.08);
    --shadow-hover: 0 20px 40px -10px rgba(0, 76, 255, 0.12), 0 0 1px rgba(0, 76, 255, 0.15);
    
    /* Typography */
    --font-letter-spacing: -0.02em;
}

.dark-theme {
    --color-bg-pure: #121212;
    --color-bg-soft: #1E1E1E;
    --color-surface: #1E1E1E;
    --color-surface-soft: #2D2D2D;
    
    --color-text-main: #F3F4F6;
    --color-text-muted: #9CA3AF;
    
    --color-border: #2D2D2D;
    --color-border-dark: #4B5563;
    
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.7);
}