/* ── gild · global tokens + reset ─────────────────────────────────────
   The ONLY global stylesheet. It holds:
     · the brand fonts,
     · the design tokens (CSS custom properties — these INHERIT through shadow
       boundaries, so every component shares the palette automatically),
     · a minimal document reset.
   Component layout/visual CSS lives encapsulated inside each component's shadow
   root (see /lib/component.mjs). Nothing structural is global, so styles from
   one component can never bleed into another. */

@font-face {
  font-family: "Canela";
  src: url("/fonts/CanelaLight.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("/fonts/Sohne-Buch.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink: #1a1610;
  --faint: rgba(26, 22, 16, 0.45);
  --cream: #faf6ec;
  --band: #ede5d5;
  --parchment: #f2ebd9;
  --vellum: #e8dfc8;
  --gilt: #b89253;
  --patina: #8b7a4f;
  --ember: #8b5e3c;

  /* one canonical scene-canvas aspect — a scene composes identically while you
     build it, when shared, and in previews (pieces are %-positioned, so
     matching the aspect is all it takes to match the look). */
  --scene-aspect: 760 / 680;

  --serif: "Canela", "Georgia", serif;
  --sans: "Sohne", system-ui, -apple-system, sans-serif;

  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* no scrollbars drawn; scrolling still works */
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }

html, body { height: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}