/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════ */
:root {
  --hero:      78px;
  --large:     56px;
  --t1:        48px;
  --t2:        40px;
  --t3:        32px;
  --t4:        28px;
  --headline:  24px;
  --body:      20px;
  --caption:   18px;

  --text-primary:    #FFFFFF;
  --text-secondary:  rgba(238,247,247,0.60);
  --text-tertiary:   rgba(238,247,247,0.30);
  --text-quaternary: rgba(238,247,247,0.20);

  --accent:      #E87D86;  /* Coral (primary) */
  --accent-warm: #E87D86;  /* Coral — used for sliders */
  --poppy:       #F09E75;
  --apricot:     #E8B97D;
  --accent2:     #A8D6F0;  /* Sky */
  --honeydew:    #8CD98C;
  --lavender:    #B0A4EF;
  --seashell:    #EEAAE3;

  --bg:          #0E1E28;
  --pill-bg:     rgba(38,50,54,0.88);
  --pill-dark:   rgba(0,0,0,0.80);
  --surface:     rgba(238,247,247,0.05);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html { touch-action: pan-x pan-y; }
body { touch-action: pan-x pan-y; overflow: hidden; }

html {
  overflow: hidden;
}
body {
  width: 1920px;
  height: 1080px;
  background: var(--bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
  user-select: none;
}

.scene {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
}