/* ============================================================
   AVENGERS UNIVERSE — MAIN STYLESHEET
   Cascade layers give deterministic ordering. Later layers win
   regardless of specificity, so there is never an !important
   arms race between components and utilities.
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

@import url('00-fonts.css');
@import url('01-reset.css')  layer(reset);
@import url('02-tokens.css');
@import url('03-base.css')   layer(base);
@import url('04-layout.css') layer(layout);

@import url('components/buttons.css');
@import url('components/logo.css');
@import url('components/atmosphere.css');
@import url('components/header.css');
@import url('components/hero.css');
@import url('components/sequence.css');
@import url('components/countdown.css');
@import url('components/cards.css');
@import url('components/movie.css');
@import url('components/article.css');
@import url('components/character.css');
@import url('components/motion.css');
@import url('components/archive.css');
@import url('components/video.css');
@import url('components/timeline-page.css');
@import url('components/search.css');
@import url('components/placeholder.css');
@import url('components/sections.css');

@layer utilities {
  .u-accent      { color: var(--accent); }
  .u-muted       { color: var(--text-muted); }
  .u-primary     { color: var(--text-primary); }
  .u-center      { text-align: center; }
  .u-mono        { font-family: var(--font-mono); }
  .u-nowrap      { white-space: nowrap; }
  .u-mt-0        { margin-block-start: 0; }
  .u-flow > * + * { margin-block-start: var(--sp-4); }
}