@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap");

:host.sl-theme-suitespot-light,
:root.sl-theme-suitespot-light {
  color-scheme: light;

  --sl-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";

  --sl-color-teal-50: hsl(180, 43%, 97%);
  --sl-color-teal-100: hsl(167, 85%, 89%);
  --sl-color-teal-200: hsl(168, 84%, 78%);
  --sl-color-teal-300: hsl(171, 77%, 64%);
  --sl-color-teal-400: hsl(172, 66%, 50%);
  --sl-color-teal-500: hsl(173, 80%, 40%);
  --sl-color-teal-600: hsl(175, 84%, 32%);
  --sl-color-teal-700: hsl(179, 91%, 25%);
  --sl-color-teal-800: hsl(179, 90%, 21%);
  --sl-color-teal-900: hsl(180, 89%, 15%);
  --sl-color-teal-950: hsl(180, 91%, 9%);

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

  --sl-color-bluewhale-50: hsl(216, 45%, 98%);
  --sl-color-bluewhale-100: hsl(216, 38%, 95%);
  --sl-color-bluewhale-200: hsl(219, 35%, 92%);
  --sl-color-bluewhale-300: hsl(219, 31%, 80%);
  --sl-color-bluewhale-400: hsl(220, 19%, 63%);
  --sl-color-bluewhale-500: hsl(222, 17%, 52%);
  --sl-color-bluewhale-600: hsl(223, 24%, 38%);
  --sl-color-bluewhale-700: hsl(223, 32%, 26%);
  --sl-color-bluewhale-800: hsl(225, 34%, 20%);
  --sl-color-bluewhale-900: hsl(226, 38%, 16%);
  --sl-color-bluewhale-950: hsl(226, 70%, 9%);

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

  --sl-color-red-50: #fef8f7;
  --sl-color-red-100: #fde7e6;
  --sl-color-red-200: #fcd5d3;
  --sl-color-red-300: #fac1bd;
  --sl-color-red-400: #f8a49e;
  --sl-color-red-500: #f47c74;
  --sl-color-red-600: #f04438;
  --sl-color-red-700: #c6382e;
  --sl-color-red-800: #a42e26;
  --sl-color-red-900: #75211b;
  --sl-color-red-950: #491511;

  --sl-color-warning-50: hsl(44, 100%, 98%);
  --sl-color-warning-100: hsl(44, 100%, 96%);
  --sl-color-warning-200: hsl(44, 98%, 89%);
  --sl-color-warning-300: hsl(44, 99%, 77%);
  --sl-color-warning-400: hsl(42, 99%, 65%);
  --sl-color-warning-500: hsl(39, 98%, 56%);
  --sl-color-warning-600: hsl(34, 94%, 50%);
  --sl-color-warning-700: hsl(22, 82%, 50%);
  --sl-color-warning-800: hsl(22, 84%, 37%);
  --sl-color-warning-900: hsl(22, 88%, 28%);
  --sl-color-warning-950: hsl(22, 88%, 10%);

  --sl-color-success-50: hsl(144, 83%, 98%);
  --sl-color-success-100: hsl(144, 83%, 96%);
  --sl-color-success-200: hsl(141, 82%, 90%);
  --sl-color-success-300: hsl(144, 78%, 80%);
  --sl-color-success-400: hsl(148, 74%, 67%);
  --sl-color-success-500: hsl(150, 66%, 52%);
  --sl-color-success-600: hsl(152, 82%, 39%);
  --sl-color-success-700: hsl(153, 96%, 30%);

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

  --sl-color-neutral-0: hsl(0, 0%, 100%);
  --sl-color-neutral-1000: hsl(0, 0%, 13%);

  --sl-input-focus-ring-color: hsl(220 43% 11% / 5%);

  --sl-border-radius-small: 0.1875rem;
  --sl-border-radius-medium: 0.5rem;
  --sl-border-radius-large: 0.875rem;
  --sl-border-radius-x-large: 1rem;
  --sl-border-radius-circle: 50%;
  --sl-border-radius-pill: 9999px;

  --sl-spacing-3x-small: 0.125rem;
  --sl-spacing-2x-small: 0.25rem;
  --sl-spacing-x-small: 0.5rem;
  --sl-spacing-small: 0.75rem;
  --sl-spacing-medium: 0.875rem;
  --sl-spacing-large: 1.125rem;
  --sl-spacing-x-large: 1.75rem;
  --sl-spacing-2x-large: 2.25rem;
  --sl-spacing-3x-large: 3rem;
  --sl-spacing-4x-large: 4.5rem;

  --sl-tooltip-padding: var(--sl-spacing-x-small) var(--sl-spacing-small);

  --sl-tooltip-font-weight: 600;
}

::selection {
  background-color: var(--sl-color-secondary-200);
  color: var(--sl-color-neutral-800);
}

sl-button[variant="default"]:not([disabled])::part(base):focus-visible {
  background-color: var(--sl-color-neutral-0);
  color: var(--sl-color-secondary-700);
}

sl-button[variant="default"]:not([disabled])::part(base):hover {
  background-color: var(--sl-color-secondary-200);
  border-color: var(--sl-color-secondary-500);
  color: var(--sl-color-neutral-1000);
}

sl-button[variant="default"]:not([disabled])::part(base):active {
  background-color: var(--sl-color-secondary-600);
  border-color: var(--sl-color-secondary-400);
  color: var(--sl-color-neutral-0);
}

sl-button[variant="default"]:not([disabled])::part(base) {
  border-color: var(--sl-color-secondary-400);
}

sl-button:not([disabled])::part(base) {
  --sl-focus-ring-color: var(--sl-color-secondary-600);
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
    var(--sl-focus-ring-color);
}

.sl-theme-suitespot-light sl-tooltip::part(body) {
}