/* ============================================================
   SimplyVacant — design token contract
   ------------------------------------------------------------
   Every design decision lives here as a custom property.
   Nothing in base.css hardcodes a colour, font, radius or
   duration. A theme file overrides values only — never names.

   This is what makes a live token-swapper possible: the panel
   sets these on document.documentElement and the whole page
   re-renders with no reflow of the stylesheet.

   Default values below are DIRECTION A — "Editorial".
   ============================================================ */

:root {
  color-scheme: light;

  /* ── Typeface ───────────────────────────────────────────── */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Instrument Sans", ui-monospace, monospace;

  /* ── Type scale ─────────────────────────────────────────── */
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  --fs-h3: 1.25rem;
  --fs-lead: 1.125rem;
  --fs-body: 0.9375rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --display-weight: 600;
  --display-tracking: -0.035em;
  --display-leading: 1.04;

  --h2-weight: 600;
  --h2-tracking: -0.025em;

  --body-weight: 400;
  --body-leading: 1.6;

  --label-weight: 500;
  --label-tracking: 0.02em;
  --label-transform: none;

  /* ── Colour ─────────────────────────────────────────────── */
  --canvas: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-sunken: #f4f4f5;
  --inverse: #09090b;
  --inverse-ink: #fafafa;

  --ink: #09090b;
  --ink-2: #52525b;
  --ink-3: #a1a1aa;

  --accent: #ff5a00;
  --accent-ink: #ffffff;
  --accent-soft: #fff1e9;
  --accent-line: #ffd4bd;

  --line: #e4e4e7;
  --line-2: #f4f4f5;

  --star: #09090b;

  /* ── Hero composition ───────────────────────────────────── */
  --hero-bg: var(--canvas);
  --hero-ink: var(--ink);
  --hero-ink-2: var(--ink-2);
  --hero-pad-top: 3.5rem;
  --hero-overlay: linear-gradient(transparent, transparent);

  /* ── Imagery ────────────────────────────────────────────── */
  --img-hero: url("img/hero-light.jpg");
  --img-suite: url("img/suite-styled.jpg");
  --img-filter: none;

  /* ── Shape ──────────────────────────────────────────────── */
  --r-card: 36px;
  --r-media: 24px;
  --r-control: 14px;
  --r-input: 12px;
  --r-pill: 10000px;
  --r-chip: 8px;

  /* ── Elevation ──────────────────────────────────────────── */
  /* Direction A uses hairlines instead of shadows. */
  --border-w: 1px;
  --elev-1: 0 0 0 1px var(--line);
  --elev-2: 0 0 0 1px var(--line);
  --elev-pop: 0 0 0 1px var(--line), 0 10px 30px -12px rgb(9 9 11 / 0.14);

  /* ── Rhythm ─────────────────────────────────────────────── */
  --maxw: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --rhythm: clamp(3.5rem, 2rem + 5vw, 5rem);
  --gap: 1rem;
  --card-pad: 1.75rem;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms;
  --dur-fast: 180ms;
  --dur: 240ms;
  --press-scale: 0.97;
  --stagger: 55ms;
}