/* ============================================
   VITO.media – Design Tokens
   ============================================ */

:root {
  /* ── Colors ── */
  --color-black:        #000000;
  --color-white:        #FFFFFF;
  --color-off-white:    #F5F5F5;
  --color-gray-100:     #E8E8E8;
  --color-gray-300:     #A0A0A0;
  --color-gray-500:     #6B6B6B;
  --color-gray-700:     #333333;
  --color-gray-900:     #111111;

  --color-accent:       rgb(105, 130, 16);
  --color-accent-hover: rgb(130, 160, 25);

  --color-bg:           var(--color-black);
  --color-text:         var(--color-white);
  --color-text-muted:   var(--color-gray-300);
  --color-text-subtle:  var(--color-gray-500);
  --color-border:       var(--color-gray-700);
  --color-surface:      var(--color-gray-900);

  /* ── Typography ── */
  --font-display:       'Sora', sans-serif;
  --font-body:          'Inter', sans-serif;
  --font-mono:          'JetBrains Mono', monospace;

  --fs-hero:            clamp(3.5rem, 8vw, 8rem);
  --fs-h1:              clamp(2.5rem, 5vw, 5rem);
  --fs-h2:              clamp(1.8rem, 3vw, 3rem);
  --fs-h3:              clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:            clamp(1rem, 1.2vw, 1.125rem);
  --fs-small:           clamp(0.8rem, 1vw, 0.875rem);
  --fs-tag:             0.75rem;

  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  --lh-tight:           1.1;
  --lh-snug:            1.3;
  --lh-normal:          1.6;

  --ls-tight:           -0.03em;
  --ls-normal:          0em;
  --ls-wide:            0.1em;
  --ls-wider:           0.2em;

  /* ── Spacing (8px grid) ── */
  --space-xs:           0.5rem;
  --space-sm:           1rem;
  --space-md:           2rem;
  --space-lg:           4rem;
  --space-xl:           6rem;
  --space-2xl:          8rem;
  --space-3xl:          12rem;

  --section-pad-y:      clamp(6rem, 12vh, 12rem);
  --container-max:      1400px;
  --container-pad-x:    clamp(1.5rem, 4vw, 4rem);
  --grid-gap:           clamp(1rem, 2vw, 2rem);

  /* ── Easings ── */
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-back:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Durations ── */
  --dur-fast:           0.3s;
  --dur-normal:         0.6s;
  --dur-slow:           1s;
  --dur-crawl:          1.5s;
}