/* jw.port color system — brief palette + exact values read from the Figma portfolio frames */
:root{
  /* Base palette */
  --jw-white:#FFFFFF;
  --jw-gray-50:rgb(245,246,246);   /* featured-work band bg */
  --jw-gray-100:rgb(245,245,245);  /* hero gradient top */
  --jw-gray-200:#E8E8E8;           /* Light Gray — surfaces, dividers, hero gradient bottom */
  --jw-gray-250:rgb(244,244,245);  /* menu hairline */
  --jw-gray-300:rgb(211,209,209);  /* card / section border */
  --jw-gray-400:rgb(179,188,192);  /* client logo tint */
  --jw-gray-500:rgb(170,170,170);  /* inactive anchor */
  --jw-gray-600:rgb(149,149,149);  /* grey-text, feedback card border */
  --jw-black-rich:#1A1A1A;         /* Rich Black — primary text */
  --jw-black:#000000;              /* Pure Black — emphasis, CTAs */
  --jw-yellow:#FFEB3B;             /* Bright Yellow — accent, 5–10% usage */
  --jw-yellow-soft:#FFF7B8;

  /* Semantic */
  --text-primary:var(--jw-black);
  --text-body:var(--jw-black-rich);
  --text-muted:rgba(0,0,0,0.333);
  --text-subtle:var(--jw-gray-500);
  --text-inverse:var(--jw-white);
  --surface-page:var(--jw-white);
  --surface-hero:linear-gradient(180deg, rgb(245,245,245) 0%, rgb(232,232,232) 100%);
  --surface-band:var(--jw-gray-50);
  --surface-card:var(--jw-white);
  --surface-nav:rgba(255,255,255,0.9);
  --surface-inverse:var(--jw-black);
  --border-card:var(--jw-gray-300);
  --border-hairline:var(--jw-gray-250);
  --border-quote:var(--jw-gray-600);
  --border-band:rgba(0,0,0,0.1);
  --accent:var(--jw-yellow);
  --accent-ink:var(--jw-black);
  --jw-highlight:rgb(245,243,117);
  --cta-bg:var(--jw-black);
  --cta-fg:var(--jw-white);
  --link:var(--jw-black);
  --focus-ring:var(--jw-yellow);
}