@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap");
@import "tailwindcss";

@plugin "daisyui" {
  themes: false;
}

@plugin "daisyui/theme" {
  name: "amcbooster";
  default: true;
  color-scheme: light;

  --color-base-100: #ffffff;
  --color-base-200: #f6f5f4;
  --color-base-300: #e5e3e0;
  --color-base-content: #17151f;

  --color-primary: #5b4b8a;
  --color-primary-content: #ffffff;

  --color-secondary: #8a7ab0;
  --color-secondary-content: #37294f;

  --color-accent: #a89a4a;
  --color-accent-content: #322d15;

  --color-neutral: #453a5c;
  --color-neutral-content: #ffffff;

  --color-info: #7a93b0;
  --color-info-content: #0f1924;

  --color-success: #7ba36a;
  --color-success-content: #1d2c17;

  --color-warning: #a89a4a;
  --color-warning-content: #322d15;

  --color-error: #b06a68;
  --color-error-content: #1f0a0a;

  --radius-selector: 1rem;
  --radius-field: 2rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

@theme {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-script: "Caveat", cursive;
}

@utility font-script {
  font-family: var(--font-script);
}

/* Always leave room for the scrollbar. Without it a page short enough not to
   scroll (an empty list, a one-row table) is a scrollbar's width wider than a
   long one, so the navbar and content jump sideways between pages. */
html {
  scrollbar-gutter: stable;
}

.input,
.textarea,
select {
  border-color: var(--color-base-300);
  box-shadow: none;
}

.input:focus,
.input:focus-within,
.textarea:focus,
.textarea:focus-within,
select:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--color-primary);
}

/* daisyUI turns .select into Chrome's customizable select, whose picker is a
   top-layer popover. Inside a focus-driven .dropdown that popover steals the
   panel's :focus-within, so the panel (and the list) closes before an option
   can be picked. The native picker keeps focus on the select. */
.dropdown .select,
.dropdown .select::picker(select) {
  appearance: auto;
}

/* --radius-field rounds every field into a pill, which suits a one-line input.
   On a multi-line textarea the same 2rem corners curve into the text, so the
   first and last lines sit cramped against them. The box radius keeps it in
   the same rounded family, with padding to match the inputs' breathing room. */
.textarea {
  border-radius: var(--radius-box);
  padding: 0.75rem 1rem;
}

/* Slow drifting gradient background, used by the toast cards */
@keyframes cloud-drift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.toast-bg {
  background-size: 200% 200%;
  animation: cloud-drift 4s ease-in-out infinite;
}