// —————————————————————————
// VMK UI Kit primitive palette.
// Extracted from Figma Style Guide → Colors → primitives.
// —————————————————————————

// neutral
$neutral-0:  #FFFFFF;
$neutral-25: #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: #FEF3E5;
$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-25;
$color-text-medium:  $neutral-500;
$color-text-dark:    $neutral-700;

// UI state (aligned with Mode 1 tokens)
$color-primary:      $neutral-900;      // action primary-bg
$color-secondary:    $mint-700;          // text.accent / icon-accent
$color-accent:       $yellow-300;        // cta-bg
$color-success:      $success-text;
$color-warning:      $warning-text;
$color-error:        $danger-text;
$color-info:         $info-text;