/*
 * CoBang — stylesheet entry point.
 *
 * Adapted from the A1 Pharmacy reference. Every page links this one file.
 * It pulls in the layers that apply everywhere: tokens, fonts, the reset,
 * typography, utilities, motion, and the components that appear in the shared
 * header and footer or on more than one page.
 *
 * Page-specific stylesheets are NOT imported here — each page links its own
 * after this file, e.g.
 *
 *     <link rel="stylesheet" href="css/main.css" />
 *     <link rel="stylesheet" href="css/pages/home.css" />
 *
 * Order matters. Later layers are written to override earlier ones, so keep
 * the sequence below as it stands when adding to it.
 */

/* 1 — Foundations. Custom properties and @font-face; no rules of their own. */
@import url('tokens.css');
@import url('fonts.css');

/* 2 — Element defaults. The reset and unclassed element styles. */
@import url('base.css');

/* 3 — Typography. The type scale, the label system, long-form prose. */
@import url('typography.css');

/* 4 — Utilities. Gutters, hairlines, section rhythm, visually-hidden. */
@import url('utilities.css');

/* 5 — Motion. Reveal states and shared keyframes. */
@import url('motion.css');

/* 6 — Shared components. */
@import url('components/button.css');
@import url('components/badge.css');
@import url('components/forms.css');
@import url('components/media.css');
@import url('components/section.css');
@import url('components/accordion.css');
@import url('components/rating.css');
@import url('components/quantity.css');
@import url('components/progress.css');
@import url('components/table.css');
@import url('components/pager.css');
@import url('components/product-card.css');
@import url('components/header.css');
@import url('components/overlays.css');
@import url('components/footer.css');
@import url('components/toast.css');
@import url('components/tooltip.css');

/* CoBang page-specific styles. */
@import url('pages/home.css');

/* ─────────────────────────────────────────────────────── page shell ───── */

/*
 * The page frame itself. The header is fixed, so `<main>` normally has to start
 * below it — except on routes whose first section is a full-bleed hero that is
 * meant to run underneath. Those pages carry `data-full-bleed` on <body>.
 */
.page {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}

.page__main {
  flex: 1;
  padding-top: var(--header-height);
}

[data-full-bleed] .page__main {
  padding-top: 0;
}