/* Go Ask Auntie color definitions */

@theme {
  --color-black:      #000000;
  --color-white:      #ffffff;

  --color-background: #81C6CE;
  --color-text:       #262259;

  --color-navy:       #262259;
  --color-red:        #EF3F5B;
  --color-teal:       #3FBDAF;
  --color-teal-light: #81C6CE;
  --color-purple:     #822369;

  --color-primary:     var(--color-navy);
  --color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
  --color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
  --color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
  --color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
  --color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
  --color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
  --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
  --color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
  --color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);

  --color-secondary:    var(--color-red);
  --color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
  --color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
  --color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
  --color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
  --color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
  --color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
  --color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
  --color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
  --color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);

  --color-teal-100: color-mix(in oklch, var(--color-teal) 10%, white);
  --color-teal-200: color-mix(in oklch, var(--color-teal) 20%, white);
  --color-teal-300: color-mix(in oklch, var(--color-teal) 30%, white);
  --color-teal-400: color-mix(in oklch, var(--color-teal) 40%, white);
  --color-teal-500: color-mix(in oklch, var(--color-teal) 50%, white);
  --color-teal-600: color-mix(in oklch, var(--color-teal) 60%, white);
  --color-teal-700: color-mix(in oklch, var(--color-teal) 70%, white);
  --color-teal-800: color-mix(in oklch, var(--color-teal) 80%, white);
  --color-teal-900: color-mix(in oklch, var(--color-teal) 90%, white);

  --color-teal-light-100: color-mix(in oklch, var(--color-teal-light) 10%, white);
  --color-teal-light-200: color-mix(in oklch, var(--color-teal-light) 20%, white);
  --color-teal-light-300: color-mix(in oklch, var(--color-teal-light) 30%, white);
  --color-teal-light-400: color-mix(in oklch, var(--color-teal-light) 40%, white);
  --color-teal-light-500: color-mix(in oklch, var(--color-teal-light) 50%, white);
  --color-teal-light-600: color-mix(in oklch, var(--color-teal-light) 60%, white);
  --color-teal-light-700: color-mix(in oklch, var(--color-teal-light) 70%, white);
  --color-teal-light-800: color-mix(in oklch, var(--color-teal-light) 80%, white);
  --color-teal-light-900: color-mix(in oklch, var(--color-teal-light) 90%, white);

  --color-purple-100: color-mix(in oklch, var(--color-purple) 10%, white);
  --color-purple-200: color-mix(in oklch, var(--color-purple) 20%, white);
  --color-purple-300: color-mix(in oklch, var(--color-purple) 30%, white);
  --color-purple-400: color-mix(in oklch, var(--color-purple) 40%, white);
  --color-purple-500: color-mix(in oklch, var(--color-purple) 50%, white);
  --color-purple-600: color-mix(in oklch, var(--color-purple) 60%, white);
  --color-purple-700: color-mix(in oklch, var(--color-purple) 70%, white);
  --color-purple-800: color-mix(in oklch, var(--color-purple) 80%, white);
  --color-purple-900: color-mix(in oklch, var(--color-purple) 90%, white);

  --color-bodylinks: var(--color-navy);
  --color-footlinks: var(--color-white);

  --color-success: var(--color-teal);
  --color-info:    var(--color-teal-light);
  --color-warning: var(--color-red-500);
  --color-danger:  var(--color-red);
  --color-light:   var(--color-teal-light-100);
  --color-dark:    var(--color-navy);
}