/* Design tokens — the single source for color, type, motion and spacing.
   Layout and type follow rachelchen.tech; palette and motion follow noho.ink: warm off-white, charcoal ink, one Rosa Mexicano accent,
   a text serif for headlines, Geist for body, Geist Mono for labels. */
:root {
  /* Color */
  --color-bg: #f1eee9;                    /* noho: warm off-white */
  --color-surface: #e7e2da;               /* noho: toque white */
  --color-ink: #3c3c3c;                   /* noho: raven black */
  --color-muted: #5f5f5f;                 /* 5.5:1 on bg, 4.9:1 on surface */
  --color-line: rgb(60 60 60 / 0.12);
  --color-dark: #3c3c3c;                  /* footer block */
  --color-on-dark: #f1eee9;
  /* One accent: Rosa Mexicano */
  --color-accent: #e4007c;                /* cursor, dots, lines, large numbers (3.9:1 on bg) */
  --color-accent-strong: #b8006f;         /* small text and links: 5.6:1 on bg, 5:1 on surface */
  --color-blush: #f6dde8;                 /* soft rosa backdrop behind work */
  --color-focus: #b8006f;
  --color-wash: rgb(241 238 233 / 0.4);   /* card hover overlay */
  --color-selection: rgb(228 0 124 / 0.14);

  /* Type */
  --font-serif: "Newsreader", "Tiempos Text", Georgia, serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-mono: 0.9375rem;     /* 15px labels and nav */
  --text-small: 0.875rem;     /* 14px */
  --text-body: 1rem;          /* 16px */
  --text-card: 1.0625rem;     /* 17px card titles */
  --text-h2: 2rem;            /* 32px section headings */
  --text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);   /* 56px case study titles */
  --text-hero: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);   /* 44px home headline */
  --tracking-tight: -0.02em;
  --leading-body: 1.55;

  /* Motion (from rachelchen.tech: 200ms UI, 300ms cards, 500ms media) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* noho-style long settle for reveals */
  --dur-fast: 200ms;
  --dur: 300ms;
  --dur-slow: 500ms;

  /* Space and layout */
  --pad: 1.5rem;              /* 24px grid gap (gutter between columns) */
  --margin: clamp(1.5rem, 5vw, 5rem); /* page side margin: 24px on phones, ~50px tablet, 72px at 1440, 80px max. Header, content and footer all share it. */
  --max: 1800px;
  --article: 48rem;           /* 768px case study column */
  --aside: 17.5rem;           /* 280px sticky menu */
}