/* === DESIGN TOKENS — u.igos === */
:root {

  /* === COLORS === */
  --color-primary:        #5B5FFF;
  --color-primary-dark:   #4338CA;
  --color-primary-light:  #818CF8;
  --color-primary-glow:   rgba(91,95,255,0.25);

  --color-secondary:      #0D0B2A;
  --color-secondary-mid:  #1E1B4B;

  --color-green:          #10B981;
  --color-green-dark:     #059669;
  --color-orange:         #FF6B35;
  --color-orange-dark:    #EA580C;
  --color-yellow:         #F59E0B;
  --color-purple:         #8B5CF6;
  --color-red:            #EF4444;

  --color-text-dark:      #0F172A;
  --color-text-mid:       #475569;
  --color-text-light:     #94A3B8;

  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #F8F9FF;
  --color-border:         #E2E8F0;

  /* === TYPOGRAPHY === */
  --font-logo:    'Inter', sans-serif;    /* brand wordmark */
  --font-display: 'Poppins', sans-serif;  /* headings */
  --font-body:    'Inter', sans-serif;    /* body text */

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  80px;

  /* === SPACING (base 8px) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* === BORDER RADIUS === */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-xs:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-sm:      0 4px 12px rgba(0,0,0,0.08);
  --shadow-md:      0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:      0 24px 64px rgba(0,0,0,0.16);
  --shadow-primary: 0 16px 48px rgba(91,95,255,0.3);
  --shadow-green:   0 12px 40px rgba(16,185,129,0.35);
  --shadow-orange:  0 12px 40px rgba(255,107,53,0.35);

  /* === TRANSITIONS === */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.3s var(--ease-out);
  --transition-slow: 0.5s var(--ease-out);
}
