@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800;900&family=Space+Grotesk:wght@700;800&display=swap");

:root {
  --skool-blue: #2563eb;
  --skool-blue-hover: #1d4ed8;
  --skool-blue-light: #60a5fa;
  --skool-white: #ffffff;
  --skool-text: #0f0f10;
  --skool-gray: #4b5563;
  --skool-bg: #ffffff;
  --skool-border: #dbeafe;
  --skool-border-blue: rgba(37, 99, 235, 0.34);
  --skool-border-blue-strong: rgba(96, 165, 250, 0.58);
  --skool-panel: rgba(255, 255, 255, 0.92);
  --skool-panel-deep: rgba(255, 255, 255, 0.96);
  --skool-blue-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
  --skool-blue-soft-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
  --skool-blue-card-shadow: 0 18px 45px rgba(37, 99, 235, 0.12);
}

* {
  scrollbar-color: var(--skool-blue) var(--skool-bg);
}

::selection {
  background: rgba(37, 99, 235, 0.35);
  color: var(--skool-white);
}

html,
body,
.bg-background,
.bg-surface,
.bg-surface-container-lowest,
.bg-surface-container-low,
.bg-surface-container,
.bg-surface-container-high,
.bg-surface-container-highest {
  background-color: var(--skool-bg) !important;
}

body,
.text-on-background,
.text-on-surface {
  color: var(--skool-text) !important;
}

.text-on-surface-variant,
.text-body-md,
.font-body-lg {
  color: var(--skool-gray) !important;
}

.text-secondary,
.text-tertiary,
.text-primary,
.text-error,
.hover\:text-primary:hover,
.hover\:text-on-surface:hover {
  color: var(--skool-blue-light) !important;
}

.bg-secondary,
.hover\:bg-surface-container:hover {
  background-color: var(--skool-blue) !important;
}

[class*="bg-secondary/"],
[class*="bg-tertiary-container"],
[class*="bg-error-container"] {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

[class*="border-outline-variant"],
[class*="border-secondary"],
[class*="border-tertiary"],
[class*="border-error"],
.border,
.border-b,
.border-t {
  border-color: var(--skool-border-blue) !important;
}

.hover\:border-secondary\/40:hover {
  border-color: var(--skool-border-blue-strong) !important;
}