/* Art in Skin — Paleta e Variáveis CSS
   Inspirado no universo vibrante da pintura facial & corporal:
   Fundo aveludado profundo com respingos cintilantes de tinta guache (Magenta, Turquesa, Amarelo Ouro, Roxo Neon).
*/
:root {
  /* Cores de Tinta (Vibrantes / Paint Splash) */
  --paint-magenta: #FF2E93;
  --paint-cyan: #00F0FF;
  --paint-yellow: #FFD600;
  --paint-purple: #9D4EDD;
  --paint-lime: #00F59B;
  --paint-orange: #FF7B00;

  /* Gradientes de Arte */
  --grad-primary: linear-gradient(135deg, #FF2E93 0%, #9D4EDD 50%, #00F0FF 100%);
  --grad-card: linear-gradient(145deg, rgba(30, 35, 58, 0.85) 0%, rgba(20, 23, 38, 0.95) 100%);
  --grad-accent: linear-gradient(135deg, #FF2E93 0%, #FF7B00 100%);
  --grad-cyan-lime: linear-gradient(135deg, #00F0FF 0%, #00F59B 100%);
  --grad-gold: linear-gradient(135deg, #FFD600 0%, #FF7B00 100%);

  /* Base Escura Sofisticada (Dark Velvet) */
  --bg-deep: #0B0E17;
  --bg-surface: #131726;
  --bg-surface-elevated: #1C2237;
  --bg-surface-hover: #262E4A;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-paint: rgba(255, 46, 147, 0.3);

  /* Texto */
  --text-main: #FFFFFF;
  --text-muted: #9AA5C4;
  --text-hint: #636F94;
  --text-inverse: #0B0E17;

  /* Estados */
  --color-success: #00F59B;
  --color-warning: #FFD600;
  --color-danger: #FF3B5C;
  --color-info: #00F0FF;

  /* Tipografia */
  --font-display: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Dimensões e Espaçamentos */
  --sidebar-width: 260px;
  --header-height: 64px;
  --bottom-nav-height: 68px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-paint-pink: 0 8px 25px rgba(255, 46, 147, 0.28);
  --shadow-paint-cyan: 0 8px 25px rgba(0, 240, 255, 0.22);
  --shadow-paint-purple: 0 8px 25px rgba(157, 78, 221, 0.28);
}