/* ── Colors ──────────────────────────────────────────────
   The portfolio is monochrome: black ink on white paper.
   Depth/hierarchy comes from OPACITY of ink, never from grey hexes.
   The accent hues below are pulled from the Figma Variable collection —
   they belong to featured client work (Income, etc.), not the portfolio
   chrome. Use them only inside project artwork, never on portfolio UI. */

:root {
  /* Base */
  --ink: rgb(0, 0, 0);            /* primary text, everything foreground */
  --paper: rgb(255, 255, 255);    /* page + card surfaces */

  /* Ink opacity ramp — the entire greyscale is alpha over black */
  --ink-100: rgb(0, 0, 0);              /* titles, names */
  --ink-50:  rgba(0, 0, 0, 0.5);        /* meta, tags, dates */
  --ink-40:  rgba(0, 0, 0, 0.4);        /* taglines, inactive nav, labels */
  --ink-10:  rgba(0, 0, 0, 0.1);        /* hairlines, dividers */

  /* Surfaces */
  --surface-image-fallback: rgb(236, 236, 236); /* placeholder behind thumbs */
  --surface-dark: rgb(27, 27, 27);              /* dark project tiles */

  /* Semantic aliases */
  --text-primary: var(--ink-100);
  --text-secondary: var(--ink-50);
  --text-muted: var(--ink-40);
  --border-hairline: var(--ink-10);

  /* Client-work accents (NOT portfolio chrome) */
  --accent-empower-orange: rgb(253, 79, 24);
  --accent-strength-violet: rgb(57, 4, 123);
  --accent-unity-blush: rgb(251, 230, 226);
}