/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — shared across index.html + all case studies.
   Generated/edited via control-tower.html. Edit values here (or
   paste an export from the control tower) to change the whole
   site from one place — do not duplicate these into page <style>
   blocks again.
════════════════════════════════════════════════════════════ */

:root {
  /* Colors */
  --black: #0A0A0A;
  --white: #FFFFFF;
  --off:   #F7F7F6;
  --g100:  #F3F4F6;
  --g300:  #D1D5DB;
  --g500:  #6B7280;
  --g700:  #374151;
  --green: #16A34A;

  /* Type */
  --font-heading: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Radius (component-level) */
  --radius-card: 16px;
  --radius-tag: 3px;

  /* Section spacing (component-level) */
  --section-pad-y: 108px;
  --section-pad-x: 48px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Parallax depth, per section (component-level) — read by the
     scroll-parallax script via data-parallax="--px-*" references.
     --parallax-strength is a master multiplier applied on top of all of them. */
  --parallax-strength: 0.45;
  --px-hero: 0.15;
  --px-about-photo: 0.1;
  --px-experience-number: 0.06;
  --px-references-columns: 0.05;
  --px-stats-number: 0.1;
  --px-contact-info: 0.05;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
}