/* GENERATED by `npm run sync:design` from design-system/. Do not edit here. */
/* ==========================================================
   FleetFixer design system, BASE
   Source of truth: design-system/ff-base.css (synced per platform).
   Reset, base elements, typography scale, focus, scrollbars, and
   the @supports glass fallback. Link AFTER ff-tokens.css.
   App platforms link this; bespoke marketing pages may skip it.
   ========================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  background-image:var(--backdrop);
  background-attachment:fixed;
}

/* Headings use the display face */
h1,h2,h3,h4,h5{ font-family:var(--font-display); color:var(--text-strong); letter-spacing:-.02em; line-height:1.15; margin:0; }
h1{ font-size:clamp(28px,4vw,44px); font-weight:800; }
h2{ font-size:clamp(22px,3vw,32px); font-weight:800; }
h3{ font-size:18px; font-weight:700; }
p{ margin:0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-strong); }
img,svg,video{ max-width:100%; display:block; }
code,kbd,samp{ font-family:var(--font-mono); }

input,select,textarea,button{ font-family:inherit; font-size:inherit; color:inherit; }

::selection{ background:var(--citrus-200); color:var(--text-strong); }
[data-theme="dark"] ::selection{ background:rgba(199,224,74,.30); color:#fff; }

/* Focus visibility, brand-tinted */
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:4px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}

/* Themed scrollbars */
*{ scrollbar-color:var(--stroke-strong) transparent; }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:var(--stroke-strong); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }

/* ==========================================================
   GLASS UTILITY + FALLBACK
   .glass is the one place blur is defined. Used on chrome
   (topbars/sidebars), modals, and standalone panels, NEVER on
   every card in a large grid (expensive), and NEVER on a
   container that holds position:fixed descendants (the
   backdrop-filter containing-block trap).
   ========================================================== */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* Solid fallback where backdrop-filter is unsupported (Firefox, old Safari) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:var(--panel); }
}

/* Honour the universal reduced-motion guard (also set in tokens) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}