/* ==========================================================================
   weareswarm.site — canonical brand foundation
   ==========================================================================
   The single source of truth for what makes this domain look like one company.
   Both primary stylesheets consume it:

     weareswarm-brand.css   ← this file: shared tokens, nothing else
     swarm-showcase.css     ← homepage composition
     weareswarm-theme.css   ← internal shell composition
     data/closeout-feed.css ← component extension (feed routes)

   What belongs here: core colour, typography families, spacing scale, radius
   language, motion language, focus/accessibility tokens.

   What does NOT belong here: layout, composition, hero treatment, section
   rhythm, CTA presentation. The homepage is a deliberately distinct conversion
   surface and is free to differ in all of those. It is not free to be a
   different brand.

   Accent policy: cyan is the canonical identity accent across all 17 routes.
   The homepage's lime/orange are retained as campaign highlights only, applied
   sparingly and never as the primary interaction colour.
   ========================================================================== */

:root {
  /* --- Core surface ---------------------------------------------------- */
  --brand-bg: #02040b;
  --brand-bg-raised: #06101f;
  --brand-surface: #08111f;
  --brand-surface-2: #0d1728;
  --brand-line: #234165;
  --brand-line-strong: #315f86;

  /* --- Core ink -------------------------------------------------------- */
  --brand-text: #f5fbff;
  --brand-muted: #9cb2d6;

  /* --- Identity accent (canonical) ------------------------------------- */
  --brand-accent: #00f5ff;
  --brand-accent-soft: #7af0e8;
  --brand-accent-alt: #a855f7;
  --brand-accent-hot: #ff3df2;

  /* --- Campaign highlights (homepage, sparing use only) ----------------- */
  --brand-campaign: #c7ff38;
  --brand-campaign-warm: #ff6d3a;

  /* --- Status ---------------------------------------------------------- */
  --brand-warn: #ffb020;
  --brand-danger: #ff4d6d;

  /* --- Typography ------------------------------------------------------
     One sans family across the domain. Manrope leads because it is the
     deliberate brand face and is already loaded on the front door; every page
     now loads it, so the declaration is true rather than aspirational. To drop
     the webfont entirely, point --brand-font-sans at the system stack here and
     remove the <link> from the pages — nothing else needs to change.        */
  --brand-font-sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Marketing emphasis. Homepage typography usage is allowed to differ; this
     token is the sanctioned way to do it. */
  --brand-font-editorial: Georgia, "Times New Roman", serif;

  /* --- Spacing scale --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* --- Radius language ------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Motion language ------------------------------------------------- */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 520ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Accessibility --------------------------------------------------- */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--brand-accent);
  --focus-ring-offset: 3px;
}

/* One focus treatment for the whole domain. :where() keeps specificity at zero
   so either composition can override it without a fight. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Shared motion contract. Both compositions animate; neither should ignore
   this preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}