/*
  V1 theme — evolved tokens layered on top of the base Portfolio design system.
  Source of truth for the patterns shipped on V1 Landing.dc.html + Resume.dc.html.
  Load AFTER the _ds token sheets; use these vars on all subsequent pages.
*/
:root {
  /* ── Brand gradient (from Portfolio 2026.fig "Hello" cover) ── */
  --gradient-brand: linear-gradient(105deg, #FF8A4C 0%, #FF54C0 48%, #7B5CFF 100%);
  /* Hero: black top fading to reveal the gradient */
  --gradient-hero-overlay: linear-gradient(180deg, #000000 0%, #000000 44%, rgba(0,0,0,0.55) 58%, rgba(0,0,0,0.22) 70%, rgba(0,0,0,0) 82%, rgba(0,0,0,0) 100%);
  /* Closing band: gradient revealed downward (CTA + footer) */
  --gradient-close-overlay: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%);
  /* Eased fade for melting imagery into black / white bands */
  --fade-to-black: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 22%, rgba(0,0,0,0.14) 44%, rgba(0,0,0,0.34) 64%, rgba(0,0,0,0.62) 82%, rgba(0,0,0,0.88) 94%, #000000 100%);
  --fade-to-white: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.2) 42%, rgba(255,255,255,0.48) 64%, rgba(255,255,255,0.78) 84%, #ffffff 100%);

  /* ── Light-mode surfaces (content sections between dark bands) ── */
  --light-page: #ffffff;
  --light-band: #f6f6f7;        /* alternating section band */
  --light-card: #ffffff;        /* cards sit white with a border */
  --light-card-border: #e5e5e5;
  --light-media-panel: #f6f6f7; /* mounted screenshot panels */
  --light-heading: #000000;
  --light-body: #4a4a4a;
  --light-muted: #7e7e7e;
  --light-hairline: #d9d9d9;

  /* ── Radii (v1 softened from the base system's radius-none) ── */
  --radius-card: 16px;
  --radius-button: 999px;         /* v1: CTAs are full pills */
  --radius-media-inset: 8px;    /* image inside a mounted panel */

  /* ── Interaction accent (hover) ── */
  --accent-hover: #b79bff;      /* light purple — link + control hover across pages */

  /* ── Metric / ProofStat card treatment (gradient top bar + soft tint fill) ── */
  --metric-fill-neutral: #efe9fb;
  --metric-fill-firefox: #f7f5fb;
  --metric-fill-venmo:   #f6f8fb;
  --metric-bar-purple: linear-gradient(90deg, #7845e8, #b79bff);
  --metric-bar-venmo:  linear-gradient(90deg, #005FDB, #6CD3FF);

  /* ── Section rhythm ── */
  --section-pad-y: 96px;
  --section-pad-x: clamp(32px, 5vw, 64px);
  --content-max: 1600px;

  /* ── Device shadow (from Portfolio 2026.fig phone cluster) ── */
  --shadow-device: 0px 5px 8px rgba(0,0,0,0.06), 0px 12px 40px rgba(0,0,0,0.084), 0px 26px 80px rgba(0,0,0,0.192);
}

/*
  ── Interaction conventions (v1) ──
  Links tint to the light-purple accent on hover; footer nav keeps the plain
  white dim; solid (knockout) CTAs keep black text and gain a purple border + dim.
  Pages may still declare these inline, but loading this sheet provides them by default.
*/
a:hover { color: var(--accent-hover) !important; opacity: 0.85; }
footer a:hover { color: #ffffff !important; opacity: 0.7; }
.cta-solid:hover { color: #000000 !important; border-color: var(--accent-hover); }