@layer theme, base, components, sections, template, utilities;

/* @homepages/template-kit — the base stylesheet every template's page loads.
 *
 * Exported as `@homepages/template-kit/base.css`. It is NOT part of the Tailwind
 * entry (that is styles.css); it ships as its own stylesheet on the page.
 *
 * Contains:
 *   - The cascade-layer order declaration above — the one place it is stated
 *   - The three reset gaps Tailwind's preflight leaves (below)
 *   - The section box model (.tr-section, emitted by the <Section> primitive)
 *   - The <Image>/<Video> frame's placeholder fill (.tr-image-frame)
 *   - Universal tokens: motion
 *
 * REQUIRES A TAILWIND ENTRY ON THE PAGE. Your entry's `@import "tailwindcss"` brings
 * Tailwind's preflight, and preflight does the reset: box-sizing, margin/padding,
 * list-style, the button and anchor resets, display:block on replaced elements. This
 * file only fills the three gaps preflight leaves. Ship base.css without a Tailwind
 * entry and you get an unreset page.
 *
 * NOT here: anything a template owns. Colors, fonts, type, radii, shadows and layout
 * — and the `body` document defaults that apply them — all come from your theme.ts,
 * compiled by compileThemeToCss. This file references no theme token at all.
 */

/* ----- Reset gaps ------------------------------------------------------- *
 * The three declarations Tailwind's preflight does NOT make. Each is load-bearing:
 * delete one and your page changes.
 *
 * Wrapped in `@layer base` so Tailwind's utilities (which compile into
 * `@layer utilities`) win over these element defaults. Unlayered, `button { cursor:
 * pointer }` would beat a layered `.cursor-default` utility outright — unlayered
 * always wins over layered in the cascade.
 */

@layer base {
  /* preflight carries no font-smoothing rule at all */
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  /* Tailwind v4 deliberately leaves buttons at the UA default `cursor: default` */
  button { cursor: pointer; }
  /* preflight caps max-width on img and video, but not on svg */
  svg { max-width: 100%; }
}

/* ----- Primitives ------------------------------------------------------- */

/* The full-bleed section root, emitted by the <Section> primitive. Always 100% wide
 * with zero padding/margin, so adjacent sections butt edge-to-edge and a page composes
 * as a vertical stack with no framework-injected whitespace. A section brings its own
 * background and internal padding. */
.tr-section {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* The <Image>/<Video> frame's placeholder fill, showing while an asset is absent or
 * loading. It is a plain class rather than a `bg-*` utility on the primitive because a
 * template names its own tokens — there is no colour token these primitives may assume
 * exists. Both frames share this one class (and one token) deliberately: the fill is the
 * same neutral rect, so a template retints it once.
 * Retint it by setting --tr-image-frame-bg in your theme's layout tokens. */
.tr-image-frame {
  background-color: var(--tr-image-frame-bg, oklch(0.97 0 0));
}

/* ----- Universal tokens ------------------------------------------------- */

:root {
  /* Motion */
  --tr-duration-fast: 150ms;
  --tr-duration-base: 250ms;
  --tr-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}