/* ==========================================================================
   Design tokens — single source of truth for the portfolio
   Change values here; the whole site reads from these variables.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Color — palette
     ------------------------------------------------------------------------ */
  --color-white: #ffffff;
  --color-black: #0a0a0a;
  --color-ink: #0a0a0c;
  --color-near-black: #131313;
  --color-tile-border: #393939;
  --color-muted: #7a7a7a;
  --color-body: #555555;
  --color-label: #c9c9c9;
  --color-stat-label: #b5b5b5;
  --color-eyebrow: #c7c7c7;
  --color-toolkit: #3e3e3e;
  --color-cta: #6e6e6e;
  --color-placeholder: #dddddd;

  /* ------------------------------------------------------------------------
     Color — semantic
     ------------------------------------------------------------------------ */
  --bg-page: var(--color-white);
  --bg-nav: rgba(255, 255, 255, 0.96);
  --bg-testimonials: var(--bg-page);
  --bg-footer: var(--color-black);
  --bg-ticker: var(--color-black);
  --bg-stat-tile: var(--color-near-black);
  --bg-video: #000000;
  --bg-cursor: var(--color-white);
  --bg-toast: var(--color-black);

  --text-primary: var(--color-black);
  --text-inverse: var(--color-white);
  --text-muted: var(--color-muted);
  --text-body: var(--color-body);
  --text-label: var(--color-label);
  --text-stat-label: var(--color-stat-label);
  --text-stats-bg: #d6d6d6;
  --text-eyebrow: var(--color-eyebrow);
  --text-toolkit: var(--color-toolkit);
  --text-nav: rgba(10, 12, 14, 0.88);
  --text-nav-logo: var(--color-ink);
  --text-footer: rgba(255, 255, 255, 0.62);
  --text-marquee-faint: rgba(10, 10, 10, 0.07);
  --text-ticker-muted: rgba(255, 255, 255, 0.35);

  --border-hairline: rgba(0, 0, 0, 0.08);
  --border-footer: rgba(10, 12, 14, 0.12);
  --border-photo: rgba(0, 0, 0, 0.35);
  --border-photo-light: rgba(0, 0, 0, 0.2);
  --border-cta: var(--color-black);

  --gradient-video-overlay: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  --gradient-video-overlay-plain: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 3%,
    rgba(0, 0, 0, 0) 60%
  );
  --gradient-video-overlay-mobile: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 25%,
    rgba(0, 0, 0, 0.78) 100%
  );

  /* ------------------------------------------------------------------------
     Typography — families
     ------------------------------------------------------------------------ */
  --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Typography — scale */
  --text-hero-title: clamp(48px, 8.5vw, 132px);
  --text-hero-sub: clamp(16px, 1.7vw, 32px);
  --text-intro: clamp(18px, 1.8vw, 30px);
  --text-statement: clamp(2.75rem, 9.5vw, 10rem);
  --text-section-label: clamp(24px, 3vw, 52px);
  --text-toolkit-word: clamp(30px, 4.2vw, 62px);
  --text-toolkit-tag: clamp(14px, 1.5vw, 23px);
  --text-stat-number: clamp(36px, 5.5vw, 96px);
  --text-stat-label-size: clamp(18px, 3.9vw, 44.2px);
  --leading-stat-label: 1.388;
  --tracking-stat-label: -0.04em;
  --text-marquee: clamp(64px, 9vw, 170px);
  --text-video-title: clamp(18px, 1.6vw, 24.2px);
  --text-video-desc: clamp(12px, 1vw, 13.75px);
  --text-testimonial: clamp(20px, 2vw, 34px);
  --text-sticky-quote: clamp(16px, 1.5vw, 21px);
  --text-testimonials-bg: clamp(52px, 11vw, 168px);
  --text-sticky-mark: clamp(72px, 12vw, 140px);
  --text-lets-talk: clamp(40px, 11vw, 220px);
  --text-ticker: clamp(18px, 2.6vw, 34px);
  --text-page-title: clamp(36px, 6vw, 88px);
  --text-page-lede: clamp(18px, 2vw, 28px);
  --text-article-h2: clamp(24px, 3vw, 40px);
  --text-article-body: clamp(16px, 1.4vw, 19px);
  --text-blockquote: clamp(18px, 2vw, 24px);
  --text-eyebrow-size: 11px;
  --text-nav-size: 14px;
  --text-nav-logo-size: 20px;
  --text-footer-logo: 15px;
  --text-footer-link: 13px;
  --text-footer-copy: 12px;
  --text-cta: 11px;
  --text-figure-caption: 13px;
  --text-attrib: 14px;
  --text-back: 14px;

  /* Typography — tracking */
  --tracking-tighter: -0.07em;
  --tracking-tight: -0.06em;
  --tracking-snug: -0.05em;
  --tracking-normal: -0.03em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 1.1px;

  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */
  --max-width: 1720px;
  --max-width-content: 1150px;
  --max-width-prose: 68ch;
  --max-width-lede: 62ch;
  --max-width-intro: 780px;
  --max-width-video-card: 1396px;
  --max-width-video-meta: 360px;

  --nav-height: 64px;
  --footer-min-height: 135px;

  /* ------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------ */
  --space-side: clamp(20px, 5vw, 120px);
  --space-side-sm: clamp(16px, 4vw, 24px);

  --pad-hero-top: clamp(20px, 3.5vh, 48px);
  --pad-hero-bottom: clamp(16px, 2.5vh, 36px);
  /* Homepage section rhythm — same top/bottom between major blocks */
  --pad-section-block: clamp(56px, 8vw, 112px);
  --pad-section-y: var(--pad-section-block);
  --pad-section-bottom: var(--pad-section-block);
  --gap-section-head: clamp(28px, 4vw, 56px);
  --pad-statement-y: clamp(56px, 10vw, 160px);
  --pad-toolkit-top: clamp(30px, 5vw, 60px);
  --pad-lets-talk-y: var(--pad-section-block);
  --pad-lets-talk-bottom: var(--pad-section-block);
  --pad-page-y: clamp(40px, 6vw, 90px);
  --pad-page-bottom: clamp(80px, 10vw, 140px);
  --pad-footer-y: 24px;
  --pad-ticker-y: clamp(18px, 3vw, 30px);

  --gap-hero: clamp(16px, 3vw, 48px);
  --hero-visual-flex: 560px;
  --hero-visual-ratio: 1207 / 980;
  --hero-visual-min-height: clamp(320px, 52vh, 560px);
  --hero-visual-bleed-bottom: 0px;
  --gap-toolkit: clamp(24px, 5vw, 80px);
  --gap-toolkit-list: clamp(28px, 4.5vw, 70px);
  --gap-stats: clamp(8px, 1vw, 16px);
  --gap-video-list: clamp(56px, 7vw, 120px);
  --gap-testimonial: clamp(20px, 2.5vw, 40px);
  --gap-sticky-grid: clamp(24px, 4vw, 40px);
  --gap-sticky-header: 14px;
  --gap-nav: 32px;
  --gap-footer: 28px;
  --gap-footer-inner: 16px;
  --gap-cta: 11px;

  /* ------------------------------------------------------------------------
     Radius, shadow, border width
     ------------------------------------------------------------------------ */
  --radius: 12px;

  --shadow-hero-card: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
  --shadow-toolkit-photo: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
  --shadow-video-card: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-figure: 0 20px 50px -24px rgba(0, 0, 0, 0.35);
  --shadow-phone: 0 8px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 4px rgba(255, 255, 255, 0.15);
  --shadow-sticky-note: 0 16px 48px rgba(0, 0, 0, 0.12);

  --bg-sticky-note: #121212;
  --border-sticky: rgba(255, 255, 255, 0.08);
  --text-sticky-mark-color: rgba(255, 255, 255, 0.14);
  --text-testimonials-bg-color: var(--text-marquee-faint);
  --radius-sticky-note: 12px;

  --size-sticky-photo: clamp(44px, 5vw, 56px);
  --pad-sticky: clamp(28px, 4vw, 48px);
  --min-height-sticky: auto;
  --width-sticky-card: min(100%, 680px);

  --border-width-photo: 2px;
  --border-width-cta: 1.5px;
  --border-width-quote: 3px;

  /* ------------------------------------------------------------------------
     Motion — portfolio-interactions skill
     ------------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 0.15s;
  --duration-fast: 0.18s;
  --duration-press: 0.2s;
  --duration-base: 0.25s;
  --duration-reveal: 0.35s;
  --duration-entrance: 0.45s;
  --duration-crossfade: 0.5s;
  --duration-slow: 0.6s;
  --duration-reveal-long: 0.8s;

  /* ------------------------------------------------------------------------
     Z-index
     ------------------------------------------------------------------------ */
  --z-nav: 100;
  --z-toast: 200;
  --z-cursor: 999;
}