/**
 * shared/tokens-app.css
 * ───────────────────────────────────────────────────────────────
 * Design system "de marca" do displix (tema claro): cores, escala
 * de cinzas, espacamento, raios, sombras e tipografia.
 *
 * Usado pelas paginas de marca/institucionais: index (landing),
 * privacy, terms. privacy/terms usam apenas um subconjunto destes
 * tokens; os extras (success/error, shadow-lg/xl/focus) ficam
 * disponiveis sem efeito colateral.
 *
 * NAO use nas telas de TV (tokens-engagement / tokens-games, escuras)
 * nem no pitch (paleta propria). O admin tem tema duplo proprio.
 * ───────────────────────────────────────────────────────────────
 */
:root {
  --color-primary:        #2B7BF5;
  --color-primary-hover:  #1A6AE0;
  --color-primary-light:  #EBF2FF;
  --color-primary-dark:   #1854C8;
  --color-gray-900: #1A1D23;
  --color-gray-700: #3D4452;
  --color-gray-500: #6B7585;
  --color-gray-400: #9AA0AD;
  --color-gray-300: #C8CDD6;
  --color-gray-200: #E2E5EA;
  --color-gray-100: #F0F2F5;
  --color-gray-50:  #F4F5F7;
  --color-white:    #FFFFFF;
  --color-dark-900: #1C2333;
  --color-dark-800: #232D42;
  --color-success:  #22C55E;
  --color-error:    #EF4444;
  --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;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.12);
  --shadow-xl:  0 8px 32px rgba(0,0,0,0.14);
  --shadow-focus: 0 0 0 3px rgba(43,123,245,0.25);
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --nav-height: 68px;
}