/* The RxBB design system (claude.ai/design, "RxBB Design System", colors_and_type.css) mapped onto
 * the Tailwind theme variables that Flowbite's CDN stylesheet reads. Markup copied from the Flowbite
 * docs (bg-blue-700, text-gray-900, border-gray-200) therefore comes out in RxBB colours.
 * This file is not inside a cascade layer, so it wins over Flowbite's @layer theme defaults. */
:root {
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Primary blue #1943DC. Flowbite fills primary buttons with 700 and hovers with 800. */
  --color-blue-50: #eaf1fa;
  --color-blue-100: #e3eeff;
  --color-blue-200: #c7d6fb;
  --color-blue-300: #9db5f5;
  --color-blue-400: #6a8cee;
  --color-blue-500: #3d63e4;
  --color-blue-600: #1943dc;
  --color-blue-700: #1943dc;
  --color-blue-800: #1539bb;
  --color-blue-900: #0f2e9e;

  /* Neutrals tinted toward the brand navy. 200 is the hairline, 900 the brand text colour. */
  --color-gray-50: #f7f9fc;
  --color-gray-100: #f1f7ff;
  --color-gray-200: #cad8ed;
  --color-gray-300: #b7c1d1;
  --color-gray-400: #8a8a96;
  --color-gray-500: #6b6c87;
  --color-gray-600: #45475f;
  --color-gray-700: #303348;
  --color-gray-800: #161e36;
  --color-gray-900: #020553;

  /* Status pills. The text shades are darker than the brand guide's so 12px labels pass WCAG AA. */
  --color-green-100: #eaffe0;
  --color-green-500: #14931a;
  --color-green-800: #0e6b13;
  --color-yellow-100: #fff4e5;
  --color-yellow-400: #f2995f;
  --color-yellow-800: #8a4b13;
  --color-red-100: #ffe5ea;
  --color-red-500: #f4022c;
  --color-red-800: #b3102a;
}

/* In dark mode 900 is only ever a page background, and the brand navy is too saturated for one.
 * The design system keeps its deeper, more neutral navy #070D2B for large dark surfaces. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-gray-900: #070d2b;
  }
}

/* Flowbite's base layer names Inter and ui-monospace outright instead of reading the variables. */
html {
  font-family: var(--font-sans);
}
code,
kbd,
pre {
  font-family: var(--font-mono);
}

/* The design system's section label ("MONITOR", "TODAY"). Flowbite's build has no 11px size or
 * 0.14em tracking, so it lives here under the design system's own class name. */
.rx-eyebrow {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Flowbite 4's drawer JS dims the page with this class, which its own CSS build does not define.
 * The tint is the design system's shadow navy. */
.bg-dark-backdrop\/70 {
  background-color: rgb(7 13 43 / 0.6);
}

/* Tailwind utilities that Flowbite's CDN build leaves out, under Tailwind's own names and values.
 * Its build only ships the classes Flowbite's components use. Before using another utility, check
 * that it is in flowbite.min.css; if not, add it here the same way. */
.min-h-screen {
  min-height: 100vh;
}
@media (width >= 40rem) {
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}