/* ============================================================
   POMSERA - Design tokens
   ------------------------------------------------------------
   Copied verbatim from app/globals.css (the live site's source
   of truth). Drop this into a new Pomsera app and build on top
   of it rather than inventing a second scale.

   Paths in the @font-face rules below assume the five WOFF2
   files from brand-kit/fonts/web/ are served at /fonts/.
   See DESIGN.md for how to use these.
   ============================================================ */

/* ---------- FONTS ---------- */

/* Self-hosted, subset to the glyphs the site actually uses and shipped as
   WOFF2 with all identifying name metadata stripped (see scripts/build-fonts).
   Only the five weights the styles reference are included. */
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/sans-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/sans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- ROOT TOKENS ---------- */

:root {
  /* - NEUTRAL SCALE (the entire palette) - */
  --ink-1000: #000000;
  --ink-900:  #0a0a0a;
  --ink-800:  #1d1d1f;
  --ink-700:  #2c2c2e;
  --ink-600:  #424245;
  --ink-500:  #6e6e73;
  --ink-400:  #86868b;
  --ink-300:  #b0b0b5;
  --ink-200:  #d2d2d7;
  --ink-150:  #e3e3e6;
  --ink-100:  #f5f5f7;
  --ink-50:   #fafafa;
  --ink-0:    #ffffff;

  /* - SEMANTIC: FOREGROUND - */
  --fg-1: var(--ink-800);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-400);
  --fg-mute: var(--ink-300);
  --fg-inverse: var(--ink-0);
  --fg-inverse-2: rgba(255,255,255,0.64);

  /* - SEMANTIC: BACKGROUND - */
  --bg-base: var(--ink-0);
  --bg-soft: var(--ink-100);
  --bg-softer: var(--ink-50);
  --bg-inverse: var(--ink-1000);
  --bg-inverse-soft: var(--ink-900);

  /* - SEMANTIC: BORDERS / HAIRLINES - */
  --hairline: var(--ink-200);
  --hairline-soft: var(--ink-150);
  --hairline-strong: var(--ink-300);
  --hairline-inverse: rgba(255,255,255,0.12);

  /* Height of the sticky bar. A token because the anchor offset below has to
     clear it exactly: when these drifted apart, jumping to a heading left it
     sitting 64px lower than it needed to. */
  --nav-h: 76px;

  /* - RADII - */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* - SHADOWS (used sparingly; restraint is the brand) - */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 4px rgba(0,0,0,0.12);

  /* - SPACING SCALE (4px base) - */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 192px;

  /* - TYPE FAMILIES - */
  --font-sans: "Proxima Nova", -apple-system, BlinkMacSystemFont,
               "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Proxima Nova", -apple-system, BlinkMacSystemFont,
                  "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* - TYPE SCALE - */
  --fs-mega:    clamp(72px, 10vw, 168px);
  --fs-display: clamp(56px, 7vw,  112px);
  --fs-h1:      clamp(40px, 4.4vw, 64px);
  --fs-h2:      clamp(32px, 3.4vw, 48px);
  --fs-h3:      clamp(22px, 2vw,   28px);
  --fs-h4:      18px;
  --fs-lead:    21px;
  --fs-body:    17px;
  --fs-sm:      15px;
  --fs-xs:      13px;
  --fs-eyebrow: 12px;

  /* - LINE HEIGHTS - */
  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* - TRACKING - */
  --track-tight:  -0.04em;
  --track-snug:   -0.02em;
  --track-base:    0;
  --track-wide:    0.04em;
  --track-eyebrow: 0.18em;

  /* - MOTION - */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  /* How long the homepage mark takes to draw itself in. Shared, because the
     section below waits this long before revealing - the two are a sequence,
     so retiming the draw must retime the handoff with it. */
  --mark-draw-dur: 0.78s;

  /* - LAYOUT - */
  --content-max: 1680px;
  --content-narrow: 1040px;
  --site-read: clamp(700px, 95vw, 1760px);
  --site-gutter: clamp(20px, 3.5vw, 72px);
  --content-read: var(--site-read);
  --measure: var(--content-read);   /* text spans the same width as media/sections */
  --gutter: var(--site-gutter);
}

/* --site-read and --site-gutter are registered as <length> so they compute to
   real pixels HERE, at the unzoomed root, and inherit downward as absolute
   values. That is the whole point of them: .home is zoomed, and a raw
   `95vw`/`3.5vw` re-evaluated inside a zoomed subtree does not reliably mean
   the same thing it meant in the nav. Resolved once at the root, the number
   the nav laid itself out with is the same number .home divides by its zoom -
   so the two line up by construction rather than by a guess about how vw
   behaves under zoom. Keep the raw clamps in one place, above, and derive. */
@property --site-read {
  syntax: "<length>";
  inherits: true;
  initial-value: 700px;
}
@property --site-gutter {
  syntax: "<length>";
  inherits: true;
  initial-value: 20px;
}