/* ============================================================
   COLORS — Monochrome portfolio system
   A single neutral grey ramp. No hue, no accent color.
   Contrast and whitespace do the work.
   ============================================================ */

:root {
  /* --- Base ink ramp (near-black → white) --- */
  --ink-950: #0a0a0a;  /* deepest — reserved, rarely used */
  --ink-900: #141414;  /* primary text */
  --ink-800: #1f1f1f;
  --ink-700: #2e2e2e;
  --ink-600: #4a4a4a;
  --ink-500: #6b6b6b;  /* secondary text */
  --ink-400: #949494;  /* muted text, placeholders */
  --ink-300: #c2c2c2;  /* strong borders, dividers */
  --ink-200: #e4e4e4;  /* default borders */
  --ink-150: #ededed;
  --ink-100: #f2f2f2;  /* subtle surface */
  --ink-50:  #f8f8f8;  /* faintest surface wash */
  --white:   #ffffff;

  /* --- Semantic: text --- */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-inverse:   var(--white);

  /* --- Semantic: surfaces --- */
  --surface:        #F1F0EE;
  --surface-subtle: var(--ink-50);
  --surface-sunken: var(--ink-100);
  --surface-card:   var(--white);  /* media / work-card ground */
  --surface-inverse: var(--ink-900);

  /* --- Semantic: lines --- */
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-inverse: rgba(255, 255, 255, 0.16);

  /* --- Interactive ink (buttons/links live off these) --- */
  --action:          var(--ink-900);
  --action-hover:    var(--ink-700);
  --action-pressed:  var(--ink-950);

  /* --- Focus ring --- */
  --focus-ring: rgba(20, 20, 20, 0.28);
}