:root {
  /* Backgrounds */
  --bg-base:        #0A0820;
  --bg-surface:     #12103A;
  --bg-surface-2:   #1C1950;
  --bg-overlay:     #0D0B2B;

  /* Brand */
  --brand-purple:   #5B3FD6;
  --brand-light:    #7B5FE8;
  --brand-dark:     #3D2B9E;

  /* Acentos */
  --accent-yellow:  #FFD700;
  --accent-orange:  #FFA500;
  --accent-cyan:    #00E5FF;
  --accent-pink:    #FF2D78;
  --accent-green:   #39FF14;

  /* Texto */
  --text-primary:   #FFFFFF;
  --text-secondary: #B0AECF;
  --text-muted:     #6B6894;

  /* Bordas */
  --border-default: #2D2860;
  --border-active:  #5B3FD6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card:  0 4px 20px rgba(0,0,0,0.4);
  --inner-glow:   inset 0 1px 0 rgba(255,255,255,0.06);
  --glow-yellow:  0 0 16px rgba(255,215,0,0.5), 0 0 32px rgba(255,215,0,0.2);
  --glow-purple:  0 0 16px rgba(91,63,214,0.6), 0 0 32px rgba(91,63,214,0.3);
  --glow-cyan:    0 0 12px rgba(0,229,255,0.5);
  --glow-pink:    0 0 12px rgba(255,45,120,0.5);
  --glow-green:   0 0 12px rgba(57,255,20,0.5);

  /* Typography */
  --font-display: 'Rajdhani', 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', 'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Button clip-path shapes */
  --clip-A:    polygon(13px 0%, 100% 4px, 100% calc(100% - 8px), calc(100% - 11px) 100%, 0% calc(100% - 3px), 0% 13px);
  --clip-A-sm: polygon( 8px 0%, 100% 2px, 100% calc(100% -  5px), calc(100% -  7px) 100%, 0% calc(100% - 2px), 0%  8px);
  --clip-B:    polygon(20px 0%, 100% 0%, calc(100% - 16px) 100%, 0% 100%);
  --clip-B-sm: polygon(13px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  --clip-C:    polygon(0% 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 0% 100%);
  --clip-C-sm: polygon(0% 0%, calc(100% - 11px) 0%, 100% 50%, calc(100% - 11px) 100%, 0% 100%);
  --clip-D:    polygon(10px 0%, calc(100% - 10px) 0%, 100% 9px, 100% calc(100% - 9px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 9px), 0% 9px);
  --clip-D-sm: polygon( 7px 0%, calc(100% -  7px) 0%, 100% 6px, 100% calc(100% -  6px), calc(100% -  7px) 100%,  7px 100%, 0% calc(100% -  6px), 0% 6px);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;

  /* Layout */
  --screen-max:    390px;
  --nav-h:         64px;
  --header-h:      56px;
  --safe-bottom:   16px;
}