@import "tailwindcss";

:root {
  --primaryblue-50: #eff6ff;
  --primaryblue-100: #dbeafe;
  --primaryblue-200: #bfdbfe;
  --primaryblue-300: #93c5fd;
  --primaryblue-400: #60a5fa;
  --primaryblue-500: #0372D8;
  --primaryblue-600: #0258b7;
  --primaryblue-700: #024194;
  --primaryblue-800: #023073;
  --primaryblue-900: #01235a;
  --primaryblue-950: #011942;

  --primarypurple:    #8E50F3;
  --primarypurple-50: #faf5ff;
  --primarypurple-100: #f3e8ff;
  --primarypurple-200: #e9d5ff;
  --primarypurple-300: #d8b4fe;
  --primarypurple-400: #c084fc;
  --primarypurple-500: #8E50F3;
  --primarypurple-600: #7c3aed;
  --primarypurple-700: #6d28d9;
  --primarypurple-800: #5b21b6;
  --primarypurple-900: #4c1d95;
  --primarypurple-950: #2e1065;

  --primaryred-50: #fef2f2;
  --primaryred-100: #fee2e2;
  --primaryred-200: #fecaca;
  --primaryred-300: #fca5a5;
  --primaryred-400: #f87171;
  --primaryred-500: #E84B1A;
  --primaryred-600: #dc2626;
  --primaryred-700: #b91c1c;
  --primaryred-800: #991b1b;
  --primaryred-900: #7f1d1d;
  --primaryred-950: #450a0a;
}

@theme {
  --color-primaryblue-50: var(--primaryblue-50);
  --color-primaryblue-100: var(--primaryblue-100);
  --color-primaryblue-200: var(--primaryblue-200);
  --color-primaryblue-300: var(--primaryblue-300);
  --color-primaryblue-400: var(--primaryblue-400);
  --color-primaryblue-500: var(--primaryblue-500);
  --color-primaryblue-600: var(--primaryblue-600);
  --color-primaryblue-700: var(--primaryblue-700);
  --color-primaryblue-800: var(--primaryblue-800);
  --color-primaryblue-900: var(--primaryblue-900);
  --color-primaryblue-950: var(--primaryblue-950);

  --color-primarypurple:     var(--primarypurple);
  --color-primarypurple-50:  var(--primarypurple-50);
  --color-primarypurple-100: var(--primarypurple-100);
  --color-primarypurple-200: var(--primarypurple-200);
  --color-primarypurple-300: var(--primarypurple-300);
  --color-primarypurple-400: var(--primarypurple-400);
  --color-primarypurple-500: var(--primarypurple-500);
  --color-primarypurple-600: var(--primarypurple-600);
  --color-primarypurple-700: var(--primarypurple-700);
  --color-primarypurple-800: var(--primarypurple-800);
  --color-primarypurple-900: var(--primarypurple-900);
  --color-primarypurple-950: var(--primarypurple-950);

  --color-primaryred-50: var(--primaryred-50);
  --color-primaryred-100: var(--primaryred-100);
  --color-primaryred-200: var(--primaryred-200);
  --color-primaryred-300: var(--primaryred-300);
  --color-primaryred-400: var(--primaryred-400);
  --color-primaryred-500: var(--primaryred-500);
  --color-primaryred-600: var(--primaryred-600);
  --color-primaryred-700: var(--primaryred-700);
  --color-primaryred-800: var(--primaryred-800);
  --color-primaryred-900: var(--primaryred-900);
  --color-primaryred-950: var(--primaryred-950);
}

/* Casey Widget Customization Classes */
.casey-bg-color {
  background-color: var(--casey-color, var(--primarypurple));
}

.casey-text-color {
  color: var(--casey-color, var(--primarypurple));
}

.casey-text-hover:hover {
  color: var(--casey-color, var(--primarypurple));
}

.casey-border-focus:focus-within {
  border-color: var(--casey-color, var(--primarypurple));
}

.casey-message-gradient {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--casey-color, var(--primarypurple)) 85%, white),
    var(--casey-color, var(--primarypurple)));
}

.casey-button-gradient {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, var(--casey-color, var(--primarypurple)) 90%, white),
    color-mix(in srgb, var(--casey-color, var(--primarypurple)) 70%, black));
}

.casey-button-gradient:hover {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, var(--casey-color, var(--primarypurple)) 80%, white),
    color-mix(in srgb, var(--casey-color, var(--primarypurple)) 60%, black));
}

.casey-document-bg {
  background-color: color-mix(in srgb, var(--casey-color, var(--primarypurple)) 20%, white);
}