@charset "utf-8";

/* ==========================================================================
   main.css — the only stylesheet a page links to.

   THIS FILE MUST CONTAIN ZERO RULES.

   Why that matters: for normal declarations, unlayered CSS sorts ABOVE every
   layer — including `utilities`. So a single bare rule written here would
   outrank the entire design system regardless of specificity. That is exactly
   the bug in the original build, where an unlayered rule setting font-size to
   17px on p/li/div/span/a/label silently killed every Tailwind text-size
   utility on the site.

   So: no selectors and no declaration blocks in this file, ever. A new
   stylesheet is added by importing it below, never by writing rules here.
   README.md documents the one-line command that verifies this.

   Layer order below is declared once. Later layers win.
   ========================================================================== */

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

/* tokens.css is deliberately NOT in a layer. It declares custom properties on
   :root and nothing else — no element selectors — so it cannot participate in
   the "unlayered rule beats the design system" hazard above. Keeping it
   unlayered also means a token stays authoritative unless someone overrides it
   deliberately from outside a layer. Every other file IS layered, and each
   declares its own @layer block internally so the file is self-describing. */

/* One webfont, three weights. The site names only Aptos and Sora, and Aptos
   is a Microsoft font that is not on Google Fonts — so Sora is the only
   family there is anything to fetch.
   Dropped vs the original: Bebas Neue (loaded, never referenced anywhere),
   JetBrains Mono, Barlow Condensed and Outfit entirely. Measured on the six
   pages, one face now downloads (Sora 600, plus Sora 700 where a button
   appears) against four families before. The preconnects stay — Sora still
   resolves through fonts.gstatic.com. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');

@import url('tokens.css');
@import url('base.css');
@import url('layout.css');
@import url('components.css');