/* ==========================================================================
   Apoxy Design System — marketing-local tokens.
   Brand tokens (palette + dark theme, type, spacing, radius, shadow, motion)
   live in run/web-shared/styles/tokens.css — the single source of truth
   shared with the blog and docs2 — and are pulled in by the @import below.
   It resolves to ./shared-tokens.css, which is a repo symlink into
   run/web-shared in local dev (dev.sh / dev-preview.sh serve the assets tree
   directly) and a real file copied in by run/dagger/marketing.go in the
   deployed image.

   This file owns only the marketing-specific bits: the @font-face URL paths,
   page layout vars, and the .apx-body base class.
   ========================================================================== */
@import url('./shared-tokens.css');

/* --- Fonts ----------------------------------------------------------------
   Inter is bundled locally via colors_and_type.css (see fonts/ directory).
   TWK Everett is the licensed brand display face — the woff/woff2 files live
   in run/web-shared/fonts/ (assets/fonts is a symlink there); Inter Display
   is the documented fallback.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'TWK Everett';
  src: url('/assets/fonts/TWKEverett-Regular.woff2') format('woff2'),
       url('/assets/fonts/TWKEverett-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Everett';
  src: url('/assets/fonts/TWKEverett-Medium.woff2') format('woff2'),
       url('/assets/fonts/TWKEverett-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Layout --- */
  --container:  1240px;
  --gutter:     32px;
}

/* ----- Base styles (apply once per artifact) ----- */
.apx-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}