/* Brand overrides
   Adjust your brand palette and typography here.
   This file loads after theme.css and can override any CSS variable. */

:root {
  /* Typography */
  --cf-font-sans: "Inter", "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cf-font-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Brand colors */
  --cf-primary: #2563eb; /* blue-600 */
  --cf-primary-soft: rgba(37, 99, 235, 0.14);
  --cf-accent: #22d3ee; /* cyan-400 */
  --cf-success: #10b981; /* emerald-500 */
  --cf-danger: #ef4444; /* red-500 */
  --cf-warning: #f59e0b; /* amber-500 */
}

:root[data-theme="dark"],
[data-theme="dark"] :root {
  /* Dark theme brand tweaks */
  --cf-primary: #60a5fa; /* blue-400 */
  --cf-primary-soft: rgba(96, 165, 250, 0.2);
  --cf-accent: #67e8f9; /* cyan-300 */
  --cf-success: #34d399; /* emerald-400 */
  --cf-danger: #f87171; /* red-400 */
  --cf-warning: #fdba74; /* orange-300 */
}

/* Brand logo image sizing */
/* Fixed brand logo size: 250 x 48 (W x H) */
.navbar-brand .brand-logo,
.site-footer__brand .brand-logo {
  display: inline-block;
  width: 250px;
  height: 48px;
  vertical-align: middle;
  object-fit: contain;
}

/* Remove any previous minimal text hiding; brand is icon-only */
@media (max-width: 480px) {
  .navbar-brand span { display: inline; }
}

/* Optional: hide text on very small screens for a more minimal look */
@media (max-width: 480px) {
  .navbar-brand span { display: none; }
}