/* assets */

@import url('https://fonts.googleapis.com/css2?family=Quintessential&family=Montserrat:wght@400;500;700&display=swap');

:root {

  /* cores */
  --color-bg:         #0D0D0D;
  --color-bg-alt1:    #111111;
  --color-bg-alt2:    #141414;
  --color-bg-alt3:    #1A1A1A;
  --color-bg-alt4:    #0A0A0A;
  --color-accent:     #FF6A00;
  --color-accent-rgb: 255, 106, 0;
  --color-white:      #FFFFFF;
  --color-gray:       #BCBCBC;
  --color-success:    #22C55E;
  --color-error:      #EF4444;

  /* rgb glow */
  --glow-accent:      0 0 20px rgba(255, 106, 0, 0.5);
  --glow-accent-soft: 0 0 10px rgba(255, 106, 0, 0.25);
  --glow-rgb:         0 0 15px rgba(255, 106, 0, 0.4), 0 0 40px rgba(100, 50, 255, 0.15), 0 0 60px rgba(0, 180, 255, 0.1);

  /* fontes */
  --font-display: 'Quintessential', cursive;
  --font-main:    'Montserrat', sans-serif;

  /* pesos */
  --weight-medium: 500;
  --weight-bold:   700;

  /* tamanhos */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.5rem;
  --fs-4xl:  5rem;
  --fs-hero: clamp(2.5rem, 6vw, 6rem);

  /* espaçamentos */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 10rem;

  /* bordas */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* transições */
  --transition-fast:   0.2s ease;
  --transition-base:   0.4s ease;
  --transition-slow:   0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* z-index */
  --z-base:    1;
  --z-header:  100;
  --z-menu:    200;
  --z-loader:  300;
  --z-cursor:  400;
}