:root {
  /*
    ---------------------------------------
    COLORS
    ---------------------------------------
  */
  /* Blue */
  --mpc-colors-blue-50: 225 242 254;
  --mpc-colors-blue-100: 225 239 254;
  --mpc-colors-blue-200: 195 221 253;
  --mpc-colors-blue-300: 164 202 254;
  --mpc-colors-blue-400: 118 169 250;
  --mpc-colors-blue-500: 63 131 248;
  --mpc-colors-blue-600: 28 100 242;
  --mpc-colors-blue-700: 26 86 219;
  --mpc-colors-blue-800: 30 66 159;
  --mpc-colors-blue-900: 35 56 118;

  /* Gray */
  --mpc-colors-gray-50: 249 250 251; /* #f9fafb */
  --mpc-colors-gray-100: 243 244 246; /* #f3f4f6 */
  --mpc-colors-gray-200: 229 231 235; /* #e5e7eb */
  --mpc-colors-gray-300: 209 213 219; /* #d1d5db */
  --mpc-colors-gray-400: 156 163 175; /* #9ca3af */
  --mpc-colors-gray-500: 107 114 128; /* #6b7280 */
  --mpc-colors-gray-600: 75 85 99; /* #4b5563 */
  --mpc-colors-gray-700: 55 65 81; /* #374151 */
  --mpc-colors-gray-800: 31 41 55; /* #1f2937 */
  --mpc-colors-gray-900: 17 24 39; /* #111827 */

  /* Success */
  --mpc-colors-success-50: 240 253 244; /* #f0fdf4 */
  --mpc-colors-success-100: 220 252 231; /* #dcfce7 */
  --mpc-colors-success-200: 187 247 208; /* #bbf7d0 */
  --mpc-colors-success-300: 134 239 172; /* #86efac */
  --mpc-colors-success-400: 74 222 128; /* #4ade80 */
  --mpc-colors-success-500: 34 197 94; /* #22c55e */
  --mpc-colors-success-600: 22 163 74; /* #16a34a */
  --mpc-colors-success-700: 21 128 61; /* #15803d */
  --mpc-colors-success-800: 22 101 52; /* #166534 */
  --mpc-colors-success-900: 20 83 45; /* #14532d */

  /* Warning */
  --mpc-colors-warning-50: 254 252 232; /* #fefce8 */
  --mpc-colors-warning-100: 254 249 195; /* #fef9c3 */
  --mpc-colors-warning-200: 254 240 138; /* #fef08a */
  --mpc-colors-warning-300: 253 224 71; /* #fde047 */
  --mpc-colors-warning-400: 250 204 21; /* #facc15 */
  --mpc-colors-warning-500: 234 179 8; /* #eab308 */
  --mpc-colors-warning-600: 202 138 4; /* #ca8a04 */
  --mpc-colors-warning-700: 161 98 7; /* #a16207 */
  --mpc-colors-warning-800: 133 77 14; /* #854d0e */
  --mpc-colors-warning-900: 113 63 18; /* #713f12 */

  /* Error */
  --mpc-colors-error-50: 254 242 242; /* #fef2f2 */
  --mpc-colors-error-100: 254 226 226; /* #fee2e2 */
  --mpc-colors-error-200: 254 202 202; /* #fecaca */
  --mpc-colors-error-300: 252 165 165; /* #fca5a5 */
  --mpc-colors-error-400: 248 113 113; /* #f87171 */
  --mpc-colors-error-500: 239 68 68; /* #ef4444 */
  --mpc-colors-error-600: 220 38 38; /* #dc2626 */
  --mpc-colors-error-700: 185 28 28; /* #b91c1c */
  --mpc-colors-error-800: 153 27 27; /* #991b1b */
  --mpc-colors-error-900: 127 29 29; /* #7f1d1d */

  --mpc-colors-white: 255 255 255; /* #FFFFFF */
  --mpc-colors-dark-white: 25 25 25; /* #191919 */

  --mpc-colors-bg: 249 249 249; /* #f9f9f9 */
  --mpc-colors-bg-alt: 255 255 255; /* #FFFFFF */

  --mpc-colors-dark-bg: 15 15 15; /* #0f0f0f */
  --mpc-colors-dark-bg-alt: 0 0 0; /* #000000 */

  /*
    ---------------------------------------
    FONT
    ---------------------------------------
  */
  --mpc-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  /* Deprecated */
  --playkit-font-family: var(--mpc-font-family);

  /*
    ---------------------------------------
    Container
    ---------------------------------------
  */
  --mpc-container-padding: 1rem;
}

/* sm: */
@media (min-width: 640px) {
  :root {
    --mpc-container-padding: 1.25rem;
  }
}

/* lg: */
@media (min-width: 1024px) {
  :root {
    --mpc-container-padding: 1.5rem;
  }
}

/* Overwrite Dark Mode */
.dark .light {
  --mpc-color-dark-white: var(--mpc-colors-white);
  color: rgb(var(--mpc-color-gray-900));
}