/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — extracted from Figma GTSFhwai8hGO7TEY7DMVto
   All values are pixel-perfect from Figma inspection.
═══════════════════════════════════════════════════════════ */

:root {

  /* ── COLOR ── */
  --bg:              #05081e;
  --bg-card:         rgba(255, 255, 255, 0.04);
  --bg-card-dark:    #05081e;
  --accent:          #80aeff;
  --accent-light:    #bcd4ff;
  --text:            #ffffff;
  --text-dim:        #c9c9c9;
  --text-dark:       #05081e;

  /* gradients */
  --gradient-card:   linear-gradient(180deg, #80aeff 0%, #bcd4ff 100%);
  --gradient-cta:    linear-gradient(180deg, #d34e0b 0%, #883411 100%);
  --gradient-card-soft:
                      linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-hero:   radial-gradient(ellipse 70% 60% at 50% 100%,
                       rgba(211,90,18,0.70) 0%,
                       rgba(180,60,0,0.30) 45%,
                       transparent 72%);

  /* borders */
  --border-card:     rgba(170, 200, 255, 0.35);
  --border-cta:      #fc5d12;
  --border-logo:     rgba(128, 174, 255, 0.20);
  --border-studio:   rgba(255,255,255,0.18);

  /* studio card gradient */
  --gradient-studio-card: linear-gradient(180deg, #ffffff 0%, #d8dedd 100%);

  /* ── TYPOGRAPHY ── */
  --font-druk:   'Druk Wide Bold', Impact, 'Arial Black', sans-serif;
  --font-body:   'Inter', sans-serif;
  --font-syne:   'Syne', sans-serif;
  --font-futura: 'Futura', 'Trebuchet MS', sans-serif;

  /* display scale */
  --size-hero:      104px;   /* hero headline */
  --size-h1:         94px;   /* section headings */
  --size-h1-lh:    102.8px;
  --size-h2-work:   40px;    /* work card titles */
  --size-city:       54px;   /* rep city names */
  --size-body-lg:    32px;
  --size-body:       21px;
  --size-body-sm:    14px;
  --size-label:      13px;
  --size-nav:        14px;

  /* ── SPACING ── */
  --space-1:        8px;
  --space-2:        16px;
  --space-3:        24px;
  --space-4:        32px;
  --space-5:        48px;
  --space-6:        64px;
  --space-7:        96px;
  --space-8:        120px;

  --container-pad:  32px;
  --content-max:    1264px;
  --container-max:  calc(var(--content-max) + (var(--container-pad) * 2));

  --section-space-y: clamp(108px, 9vw, 151px);
  --section-space-tight: clamp(83px, 6.3vw, 108px);
  --section-space-loose: clamp(137px, 10.8vw, 194px);
  --stack-heading-sub: clamp(var(--space-2), 1.8vw, var(--space-3));
  --stack-sub-content: clamp(var(--space-3), 2.4vw, var(--space-4));
  --stack-content-cta: clamp(var(--space-4), 3vw, 40px);
  --card-gap: clamp(var(--space-3), 2.2vw, var(--space-4));
  --card-pad: clamp(20px, 1.8vw, 28px);
  --feature-card-pad: clamp(var(--space-3), 2.4vw, var(--space-4));
  --content-media-gap: clamp(var(--space-4), 3vw, 56px);
  --copy-max:       72ch;
  --body-line-height: 1.6;

  /* ── RADIUS ── */
  --radius-card:    16px;
  --radius-pill:    200px;
  --radius-logo:    10px;

  /* ── SHADOW ── */
  --shadow-soft:    0 18px 48px rgba(1, 5, 24, 0.14);
  --shadow-card:    0 24px 58px rgba(1, 5, 24, 0.18);
  --shadow-float:   0 32px 80px rgba(1, 5, 24, 0.24);

  /* ── MOTION ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}