/* ==========================================================================
   INITME: DESIGN TOKENS
   Source of truth: "Initme Design System" (Claude Design project).
   Values below are copied from its tokens/*.css. Anything marked
   "extension" is an addition this site needed; fold it back into the system.
   ========================================================================== */
:root {
  /* Colour: primary */
  --black: #000000;
  --white: #ffffff;
  /* Colour: supporting */
  --off-white: #f5f3ef;
  --light-gray: #eaeaea;
  --mid-gray: #888888;
  --dark-gray: #202020;
  /* Colour: creative accents (selected moments only) */
  --accent-yellow: #f5d547;
  --accent-orange: #ff5a36;
  --accent-blue: #4169ff;
  /* extension: AA-safe muted text (mid-gray fails 4.5:1 on white) */
  --text-muted: #5c5c5c;
  --text-muted-inverse: #a8a8a8;

  /* Semantic aliases */
  --surface-page: var(--white);
  --surface-alt: var(--off-white);
  --surface-inverse: var(--black);
  --text: var(--black);
  --text-inverse: var(--white);
  --rule: var(--light-gray);
  --rule-strong: var(--black);

  /* Type */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero: clamp(64px, 9vw, 150px);
  --fs-statement: clamp(48px, 7vw, 110px);
  --fs-h2: clamp(42px, 5vw, 82px);
  --fs-h3: clamp(28px, 3vw, 44px);
  --fs-footer: clamp(60px, 10vw, 160px);
  --fs-body: clamp(16px, 1.1vw, 19px);
  --fs-label: 12px;

  /* Spacing scale */
  --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: 200px;
  --section-pad: clamp(80px, 10vw, 180px);

  /* Layout */
  --container-max: 1500px;
  --page-pad: 64px;
  --grid-gap: 24px;
  --header-h: 80px;

  /* Radius: 0 by default */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-reveal: 800ms;
}

@media (max-width: 1100px) { :root { --page-pad: 32px; --grid-gap: 20px; --header-h: 72px; } }
@media (max-width: 640px)  { :root { --page-pad: 20px; --grid-gap: 16px; --header-h: 64px; } }