/**
 * Tokens de design — fonte única da verdade para a linguagem visual.
 *
 * Regras:
 * - Componentes nunca usam valores brutos; eles consomem estes tokens.
 * - Espaçamento e raio seguem a escala 4/8: 4 8 16 24 32 40 48 56 64.
 * - Nomes de tokens expressam a intenção (--color-primary) ou o valor
 *   (--space-16 = 16px), nunca os dois ao mesmo tempo.
 */

:root {
	/* ------------------------------------------------------------------
	 * Cor — marca
	 * ---------------------------------------------------------------- */
	--color-primary:       #00ABFF;
	--color-primary-dark:  #0090D9;
	--color-primary-light: #CCF0FF;
	--color-primary-overlay: #0095FF;  /* decoração sobre fundo primário */
	--color-green:         #01cf66;
	--color-purple:        #A267FF;
	--color-accent:        #FBAC00;
	--color-accent-light:  #FFDA0B;
	--color-red:           #FD2057;
	--color-pure-white:    #FFFFFF;

	/* Cor — neutros */
	--color-background:    #EFF4F8;
	--color-pastel-grey:        #e2e8f0;
	--color-text:          #495261;
	--color-text-muted:    #64748b;

	/* Cor — feedback */
	--color-success: #01cf66;
	--color-warning: #FBAC00;
	--color-danger:  #FD2057;
	--color-info:    #A267FF;

	/* Cor — sobreposições para elementos sobre fundos coloridos */
	--overlay-white-sm: rgba(255, 255, 255, 0.404);
	--overlay-white-md: rgba(255 255 255 / 0.20);
	--overlay-white-lg: rgba(255 255 255 / 0.28);
	--overlay-white-xl: rgba(255 255 255 / 0.9);   /* texto secundário sobre fundo primário */

	/* Opacidade */
	--opacity-subtle: 0.9;  /* texto secundário (lead, descrições) */
	--opacity-muted:  0.8;  /* texto terciário (scores, metadados) */

	/* ------------------------------------------------------------------
	 * Tipografia
	 * Montserrat para títulos, Figtree para todo o restante.
	 * ---------------------------------------------------------------- */
	--font-heading: "Montserrat", "Segoe UI", Arial, sans-serif;
	--font-body: "Figtree", "Segoe UI", Arial, sans-serif;

	--font-size-14: 0.875rem;
	--font-size-16: 1rem;
	--font-size-18: 1.125rem;
	--font-size-20: 1.25rem;
	--font-size-24: 1.5rem;
	--font-size-32: 2rem;
	--font-size-40: 2.5rem;
	--font-size-48: 3rem;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	--line-height-tight: 1.2;
	--line-height-base: 1.6;

	/* ------------------------------------------------------------------
	 * Espaçamento — escala 4/8 (nome = pixels, valor em rem)
	 * ---------------------------------------------------------------- */
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-16: 1rem;
	--space-24: 1.5rem;
	--space-32: 2rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-56: 3.5rem;
	--space-64: 4rem;

	/* ------------------------------------------------------------------
	 * Raio de borda — mesma escala
	 * ---------------------------------------------------------------- */
	--radius-4: 0.25rem;
	--radius-8: 0.5rem;
	--radius-16: 1rem;
	--radius-24: 1.5rem;
	--radius-full: 9999px;

	/* ------------------------------------------------------------------
	 * Elevação
	 * ---------------------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
	--shadow-md: 0 4px 12px rgb(15 23 42 / 0.10);
	--shadow-lg: 0 12px 32px rgb(15 23 42 / 0.16);

	/* ------------------------------------------------------------------
	 * Movimento
	 * ---------------------------------------------------------------- */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* ------------------------------------------------------------------
	 * Layout
	 * ---------------------------------------------------------------- */
	--container-max: 72rem;      /* 1152px */
	--container-game: 60rem;     /* 960px — largura do conteúdo do jogo */
	--content-max: 45rem;        /* largura confortável para leitura */
	--height-header:       5.25rem;  /* 84px */
	--height-ranking-hero: 33.25rem; /* 532px */

	--z-index-header: 100;
	--z-index-overlay: 200;
}

/*
 * Pontos de quebra — custom properties não funcionam em @media, usar os valores direto.
 * breakpoint-md: 48rem  / 768px  — mobile → tablet
 * breakpoint-lg: 60rem  / 960px  — tablet → desktop
 */