/* Friends & Robots — Static Ad Factory shared base.
   Loaded (after tokens.css) by every Factory page: the landing
   (static-ad-factory.html) and the app (app.html). Holds the fixed-light
   Factory palette plus the page-level guards both pages rely on; page
   CSS files hold only their own components. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

.saf {
  /* Factory palette (hex conversions of the Lovable design's oklch
     values). The canvas is pure white — brighter than the tokens' light
     --bg-1 — so the design's exact colors are pinned here instead of the
     semantic vars. */
  --saf-bg: #FFFFFF;
  --saf-ink: #12161D;
  --saf-ink-soft: #3D4653;
  --saf-muted: #8895A3;
  --saf-surface: #F7F8FA;
  /* One step down from --saf-surface: the well behind image placeholders
     and progress tracks, where plain surface would disappear. */
  --saf-surface-2: #F0F1F4;
  --saf-border: #E4E7EA;
  --saf-input-border: #DDE1E6;
  --saf-brand: #F97316;
  --saf-brand-pressed: #EA580C;
  --saf-brand-soft: #FCEEE0;
  --saf-sky-deep: #2C9FCC;
  --saf-sky-soft: #EAF3F8;
  --saf-destructive: #D64545;

  background: var(--saf-bg);
  color: var(--saf-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Overlays and their inner states toggle via the hidden attribute; the
   component rules set display: flex/block on those same elements, which
   would silently override the UA's [hidden] { display: none }. This
   guard keeps the attribute authoritative. */
.saf [hidden] { display: none !important; }

/* :where() keeps the resets at zero specificity so component rules
   (padding, link colors, …) always win over them. */
:where(.saf) a { color: inherit; text-decoration: none; }
:where(.saf) button {
  font-family: inherit;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.saf :focus-visible {
  outline: 2px solid var(--saf-brand);
  outline-offset: 2px;
}

.saf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}