:root { /** Primary colors * --primary-50 to 900: primary color scale * --primary: Background Color / primary (primary-950) * --primary-foreground: Text Color / white (base-white) */ --primary-50: #F2F8FD; --primary-100: #E6F1FD; --primary-200: #CCE3FA; --primary-300: #B3D5F8; --primary-400: #99C7F5; --primary-500: #7FB8F2; --primary-600: #66ABF0; --primary-700: #4D9DEE; --primary-800: #338FEB; --primary-900: #1A81E9; --primary: #0073E6; --primary-foreground: #FFFFFF; /** Secondary colors * --secondary: Background Color / secondary (secondary-950) */ --secondary: #0053A9; /** Tertiary colors * --tertiary: Background Color / tertiary (tertiary-950) */ --tertiary: #F2418B; --tertiary-background: #FEECF4; /** Accents colors * --accent: Background Color / accent (accent-950) */ --accent: #ED001B; /** Default colors of * --foreground: Text Color / medium-emphasis (slate-600) */ --foreground: #475569; /** Muted colors * --muted: Background Color / disabled * --muted-foreground: Text Color / disabled */ --muted: #F5F5F5; --muted-foreground: #D4D4D4; /** Badge colors * --badge: Background Color (emerald-500) / Text Color * --badge-foreground: Text Color * --badge-background: Background Color */ --badge: #10B981; --badge-foreground: #FFFFFF; --badge-background: #D1FAE5; /** Shadow */ --shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1); --ip-hover-shadow: 0 0 0 12px rgba(26,129,233, 0.2); }