:root {
  /* ============================================================
     BRAND — gradiente roxo → azul → magenta (o ativo visual principal)
     Usar com contenção: logo "ON", CTAs, números/ícones de destaque.
     ============================================================ */
  --purple:  #7C3AED;
  --blue:    #4F46E5;
  --magenta: #EC4899;
  --gradient-brand: linear-gradient(135deg, #7C3AED 0%, #4F46E5 45%, #EC4899 100%);
  /* alias de compatibilidade — código existente referencia --gradient-primary */
  --gradient-primary: var(--gradient-brand);

  /* ============================================================
     ACENTO SÓLIDO (derivado do azul/índigo central)
     ============================================================ */
  --primary:        #4F46E5;
  --primary-dark:   #4338CA;
  --primary-deep:   #3730A3;
  --primary-light:  #EEF0FF;   /* tint claro p/ fundos sutis */
  --primary-muted:  #DDE1FF;
  --primary-glow:   rgba(124, 58, 237, 0.26);

  /* ============================================================
     BASE (light mode premium)
     ============================================================ */
  --bg:             #FAFAFB;   /* branco-gelo, não branco puro */
  --surface:        #FAFAFB;   /* fundo do app */
  --surface-deep:   #F0F0F4;
  --card:           #FFFFFF;

  --text:           #13131A;   /* quase-preto azulado */
  --text-strong:    #0A0A0F;   /* títulos / wordmark */
  --text-muted:     #6B7280;
  --text-light:     #9CA3AF;

  --border:         #ECECF0;   /* sutil */
  --border-soft:    #F2F2F6;
  --border-focus:   #7C3AED;   /* foco roxo */

  --success:        #10B981;
  --success-light:  #D1FAE5;
  --error:          #EF4444;
  --error-light:    #FEE2E2;
  --warning:        #F59E0B;
  --warning-light:  #FEF3C7;

  /* ============================================================
     TIPOGRAFIA
     ============================================================ */
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

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

  /* tracking padrão p/ headlines (contenção tipo Linear) */
  --tracking-tight: -0.02em;

  /* ============================================================
     ESPAÇAMENTO
     ============================================================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ============================================================
     RAIO — consistente: 12px cards, 10px botões/inputs
     ============================================================ */
  --radius-sm:  8px;
  --radius:     10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ============================================================
     SOMBRAS COLORIDAS (tom roxo sutil = aspecto premium)
     ============================================================ */
  --shadow-sm:  0 1px 2px rgba(19, 19, 26, .04), 0 1px 3px rgba(124, 58, 237, .04);
  --shadow:     0 2px 8px -2px rgba(124, 58, 237, .08);
  --shadow-md:  0 4px 24px -8px rgba(124, 58, 237, .12);
  --shadow-lg:  0 12px 40px -12px rgba(124, 58, 237, .18);
  --shadow-glow: 0 8px 40px -8px rgba(124, 58, 237, .25);
  --shadow-primary: var(--shadow-glow);

  /* ============================================================
     TRANSIÇÕES
     ============================================================ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 200ms var(--ease);

  /* Layout */
  --header-h:    60px;
  --panel-form-w: 440px;
}

/* ============================================================
   UTILITÁRIO — texto com gradiente da marca (com fallback)
   ============================================================ */
.grad-text {
  color: var(--purple);                 /* fallback */
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { -webkit-text-fill-color: currentColor; color: var(--purple); }
}