:root {
  /* === Colors === */
  --c-bg:          #0A0A0A;
  --c-bg-raised:   #101010;
  --c-bg-section:  #0E0E0E;
  --c-fg:          #F4F4F2;
  --c-fg-muted:    #C9C9C6;
  --c-fg-subtle:   #A8A8A8;
  --c-fg-faint:    #8F8F8C;
  --c-border:      #1C1C1C;
  --c-border-card: #1F1F1F;
  --c-border-com:  #242424;
  --c-dot-div:     #4A4A4A;
  --c-accent:      #25D366;
  --c-accent-hov:  #3FE57E;
  --c-accent-ink:  #07230F;

  /* === Typography === */
  --ff:        'Archivo', ui-sans-serif, system-ui, sans-serif;
  --fw-reg:    400;
  --fw-med:    500;
  --fw-bold:   700;
  --fw-black:  800;

  --fs-xs:        12px;
  --fs-sm:        13px;
  --fs-base:      16px;
  --fs-md:        17px;
  --fs-lg:        20px;
  --fs-xl:        22px;
  --fs-hero:      clamp(38px, 6.4vw, 61px);
  --fs-h2:        clamp(28px, 4.4vw, 39px);
  --fs-h2-lg:     clamp(32px, 5.6vw, 49px);
  --fs-body:      clamp(17px, 2.2vw, 20px);
  --fs-cta:       clamp(18px, 2.4vw, 21px);
  --fs-monogram:  clamp(56px, 13vw, 78px);

  /* === Spacing (8px grid) === */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* === Section rhythm === */
  --section-py:    clamp(56px, 8vw, 96px);
  --section-py-lg: clamp(64px, 9vw, 112px);
  --section-py-sm: clamp(40px, 6vw, 72px);
  --hero-pt:       clamp(40px, 7vw, 88px);
  --hero-pb:       clamp(64px, 9vw, 104px);

  /* === Layout === */
  --max-w:    1080px;
  --max-w-sm: 720px;
  --px:       24px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-xs:   4px;

  /* === Carousel === */
  --brand-gap: 72px;

  /* === Motion === */
  --dur-fast: 150ms;
  --dur-rev:  550ms;
  --dur-dot:  420ms;
  --ease-rev: cubic-bezier(.2,.7,.2,1);
}