// ————————————————————————— // VMK UI Kit primitive palette. // Extracted from Figma Style Guide → Colors → primitives. // ————————————————————————— // neutral $neutral-0: #FCFCFC; $neutral-50: #F7F7F8; $neutral-100:#F0F0F0; $neutral-200:#E1E2E3; $neutral-300:#D9D9D9; $neutral-400:#B7BABE; $neutral-500:#9CA3AF; $neutral-600:#82868D; $neutral-700:#6B7280; $neutral-800:#3F4145; $neutral-900:#1A1A1A; // lavender $lavender-50: #F4F3FC; $lavender-100:#ECE8FA; $lavender-200:#E1E0F7; $lavender-300:#D8D7F5; $lavender-400:#C0BEF0; $lavender-500:#A19FE0; $lavender-600:#8482C4; $lavender-700:#5B5A9C; $lavender-800:#4A4880; $lavender-900:#3D3B7A; // mint $mint-50: #F2FAFB; $mint-100:#E9F6F8; $mint-200:#DFF1F4; $mint-300:#D9EEF2; $mint-400:#BEE0E6; $mint-500:#A9D8DF; $mint-600:#7EC0C9; $mint-700:#4E96A0; $mint-800:#316873; $mint-900:#1F4B52; // yellow $yellow-50: #FEFEF0; $yellow-100:#FDFCB8; $yellow-200:#FCFB94; $yellow-300:#FCFD76; $yellow-400:#F0F166; $yellow-500:#E8E94A; $yellow-600:#D5D636; $yellow-700:#C4C520; $yellow-800:#A6A71B; $yellow-900:#8A8B12; // semantic primitives $danger-bg: #FBE4E2; $danger-text:#D64545; $info-bg: #EAF4FE; $info-text: #2563A6; $success-bg: #DDF3E4; $success-text:#1E7A46; $warning-bg: #FEF0DD; $warning-text:#B45309; // convenience aliases used across components $color-black: $neutral-900; $color-dark: $neutral-800; $color-grey: $neutral-500; $color-cyan: $mint-500; $color-magenta: $lavender-500; $color-hot-pink: $lavender-700; $color-electric-blue:$lavender-600; $color-orange: $warning-text; $color-purple: $lavender-500; $color-indigo: $lavender-800; $color-teal: $mint-700; $color-neon-yellow: $yellow-300; $color-neon-green: $success-text; // text tones $color-text-light: $neutral-0; $color-text-medium: $neutral-500; $color-text-dark: $neutral-700; // UI state $color-primary: $neutral-900; $color-secondary: $mint-500; $color-accent: $yellow-300; $color-success: $success-text; $color-warning: $warning-text; $color-error: $danger-text; $color-info: $info-text;