@layer tokens, reset, atoms, molecules, organisms, patterns;

@import "tokens.css";
@import "atoms.css";
@import "molecules.css";
@import "organisms.css";
@import "patterns.css";

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    background: var(--canvas);
    color: var(--white);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  pre { overflow-x: auto; }
  :where(.story__grid, .about, .contact, .grid-3, .grid-2, .grid-bento, .quote-wall, .about__stats, .opencpo__stats, .mockup__split) > * { min-width: 0; }
  input, button, textarea, select { font: inherit; }
  button { cursor: pointer; }
  h1, h2, h3, .display {
    font-family: var(--font-title);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  h4 { text-wrap: balance; }
  code, kbd, pre, .mono { font-family: var(--font-mono); }
  p { text-wrap: pretty; }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
}