:root {
  /* Brand */
  --color-bg:         #1F2335;
  --color-surface:    #252A3D;
  --color-surface-2:  #2C3250;
  --color-primary:    #78FF00;
  --color-primary-dk: #459100;
  --color-text:       #FAFAFA;
  --color-muted:      rgba(250,250,250,.5);
  --color-border:     rgba(250,250,250,.08);

  /* Typography */
  --font: 'Raleway', system-ui, sans-serif;

  /* Type scale — Tailwind */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  72px;
  --text-8xl:  96px;

  /* Spacing */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;
  --sp-128: 128px;

  /* Radius */
  --radius:      100px;  /* pills / buttons */
  --radius-card: 12px;   /* cards */
  --radius-in:   8px;    /* inner panels */

  /* Layout */
  --max-width: 1200px;

  /* Glass */
  --glass-bg:    rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.08);
  --glass-blur:  16px;

  /* Gradient */
  --grad-btn: linear-gradient(180deg, #78FF00 10%, #459100 90%);

  /* Shadows */
  --shadow-glow: 0 0 40px rgba(120,255,0,.2);

  /* Motion */
  --ease:        cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
}