:root {
  --paper: #f4f4f2;
  --paper-2: #ebebe8;
  --ink: #141517;
  --ink-2: #4b4e53;
  --ink-3: #6a6d72;
  --line: rgba(20, 21, 23, 0.12);
  --hero-grey: #999d9e;
  --hero-dark: #1c1d20;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.72);
  --accent: #0e6b4f;
  --accent-soft: rgba(14, 107, 79, 0.12);
  --status: #2bb673;

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --fs-body: clamp(16px, 1.15vw, 18px);
  --fs-small: 14px;
  --fs-role: clamp(1.45rem, 2.2vw, 2.35rem);
  --fs-name: max(8.5rem, 15vw);

  --gap: clamp(1.5rem, 4vw, 2.5rem);
  --radius-control: 999px;
  --radius-card: 20px;
  --radius-media: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --t-control: 220ms;
  --t-arrive: 700ms;

  /* Interactive content color: rests in secondary grey, eases to primary ink on hover/focus. */
  --ix-color: var(--ink-3);       /* resting grey */
  --ix-color-active: var(--ink);  /* hover/focus ink */
  --ix-t: 320ms;                  /* color transition duration */
  --ix-ease: var(--ease-io);      /* smooth ease-in-out */
}

/* Reusable interactive-content pattern: grey at rest, ink on hover/focus,
   seamless smooth ease-in-out. Apply to any interactive text/control. */
.ix {
  color: var(--ix-color);
  transition: color var(--ix-t) var(--ix-ease);
}
@media (hover: hover) {
  /* .mag-ink is the magnetic framework's EXCLUSIVE ink latch (hero.js): of all the
     elements currently engaged, only the one the cursor is deepest into carries the
     class, so the active color shows on a single element at a time — no two black
     nav items mid-transition. (Every engaged element still keeps .mag-hover, which
     holds the hand cursor page-wide; only the ink is exclusive.) */
  .ix:is(:hover, .mag-ink), .ix:focus-visible { color: var(--ix-color-active); }
}

:root[data-theme="dark"] {
  --paper: #121315;
  --paper-2: #1a1b1e;
  --ink: #f2f2ef;
  --ink-2: #b8bab9;
  --ink-3: #9a9d9e;
  --line: rgba(255, 255, 255, 0.12);
  --hero-grey: #2a2c30;
  --accent: #3fbf8f;
  --accent-soft: rgba(63, 191, 143, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121315;
    --paper-2: #1a1b1e;
    --ink: #f2f2ef;
    --ink-2: #b8bab9;
    --ink-3: #9a9d9e;
    --line: rgba(255, 255, 255, 0.12);
    --hero-grey: #2a2c30;
    --accent: #3fbf8f;
    --accent-soft: rgba(63, 191, 143, 0.14);
  }
}