/* OVERWRITE THESE WITH YOUR CUSTOM STYLES IF YOU WANT TO CONFIGURE */
/* If color-mix functionality is good enough, only primary, secondary, success, warning, need to be overwritten */

/* AIAGENT COLORS */

/*
:root {
  --primary: #e59720;
  --secondary: blue;
  --warning: #e87722;
  --success: #475e2d;
  --neutral-1: #ffffff;
  --neutral-1000: #000000;
}
  */

/* SGL COLORS */

:root {
  --primary: #cd171d;
  --secondary: #4f4f4f;
  --warning: #e87722;
  --success: #475e2d;
  --neutral-1: #ffffff;
  --neutral-1000: #000000;
}

:root {
  --primary-50: color-mix(in sRGB, white 90%, var(--primary) 10%);
  --primary-100: color-mix(in sRGB, white 80%, var(--primary) 20%);
  --primary-200: color-mix(in sRGB, white 60%, var(--primary) 40%);
  --primary-300: color-mix(in sRGB, white 40%, var(--primary) 60%);
  --primary-400: color-mix(in sRGB, white 20%, var(--primary) 80%);
  --primary-500: var(--primary);
  --primary-600: color-mix(in sRGB, black 20%, var(--primary) 80%);
  --primary-700: color-mix(in sRGB, black 40%, var(--primary) 60%);
  --primary-800: color-mix(in sRGB, black 60%, var(--primary) 40%);
  --primary-900: color-mix(in sRGB, black 80%, var(--primary) 20%);
}

:root {
  --secondary-50: color-mix(in sRGB, white 90%, var(--secondary) 10%);
  --secondary-100: color-mix(in sRGB, white 80%, var(--secondary) 20%);
  --secondary-200: color-mix(in sRGB, white 60%, var(--secondary) 40%);
  --secondary-300: color-mix(in sRGB, white 40%, var(--secondary) 60%);
  --secondary-400: color-mix(in sRGB, white 20%, var(--secondary) 80%);
  --secondary-500: var(--secondary);
  --secondary-600: color-mix(in sRGB, black 20%, var(--secondary) 80%);
  --secondary-700: color-mix(in sRGB, black 40%, var(--secondary) 60%);
  --secondary-800: color-mix(in sRGB, black 60%, var(--secondary) 40%);
  --secondary-900: color-mix(in sRGB, black 80%, var(--secondary) 20%);
}

:root {
  --warning-50: color-mix(in sRGB, white 90%, var(--warning) 10%);
  --warning-100: color-mix(in sRGB, white 80%, var(--warning) 20%);
  --warning-200: color-mix(in sRGB, white 60%, var(--warning) 40%);
  --warning-300: color-mix(in sRGB, white 40%, var(--warning) 60%);
  --warning-400: color-mix(in sRGB, white 20%, var(--warning) 80%);
  --warning-500: var(--warning);
  --warning-600: color-mix(in sRGB, black 20%, var(--warning) 80%);
  --warning-700: color-mix(in sRGB, black 40%, var(--warning) 60%);
  --warning-800: color-mix(in sRGB, black 60%, var(--warning) 40%);
  --warning-900: color-mix(in sRGB, black 80%, var(--warning) 20%);
}

:root {
  --success-50: color-mix(in sRGB, white 90%, var(--success) 10%);
  --success-100: color-mix(in sRGB, white 80%, var(--success) 20%);
  --success-200: color-mix(in sRGB, white 60%, var(--success) 40%);
  --success-300: color-mix(in sRGB, white 40%, var(--success) 60%);
  --success-400: color-mix(in sRGB, white 20%, var(--success) 80%);
  --success-500: var(--success);
  --success-600: color-mix(in sRGB, black 20%, var(--success) 80%);
  --success-700: color-mix(in sRGB, black 40%, var(--success) 60%);
  --success-800: color-mix(in sRGB, black 60%, var(--success) 40%);
  --success-900: color-mix(in sRGB, black 80%, var(--success) 20%);
}