/* variables.css — design tokens */
:root {
  /* ── Colors ── */
  --purple:        #8B3FFF;
  --purple-light:  #B47BFF;
  --purple-dark:   #5B20CC;
  --purple-dim:    rgba(139, 63, 255, 0.12);
  --purple-border: rgba(139, 63, 255, 0.25);

  --black:  #0A0A0A;
  --dark:   #111111;
  --dark2:  #1A1A1A;
  --dark3:  #222222;
  --white:  #F5F5F0;
  --gray:   #888888;
  --gray-light: rgba(245, 245, 240, 0.55);

  /* ── Typography ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Spacing ── */
  --section-pad-x: 80px;
  --section-pad-y: 100px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-med:  0.4s;
  --duration-slow: 0.8s;

  /* ── Clip-path ── */
  --clip-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --clip-md: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}