/* ====================================
   WebApp - Area Theme Tokens
   ====================================

   Cada área (customer/partner/admin) define seu próprio conjunto de tokens
   semânticos. Componentes (botões, focus rings, dropdowns, hovers) consomem
   os tokens em vez de cores hardcoded — assim, mudar a paleta de uma área
   propaga automaticamente sem ter de caçar hex pelo CSS inteiro.

   Convenção de tokens (idêntica nas três áreas):
     --primary           cor primária da área
     --primary-hover     mesma cor ~10% mais escura (state :hover)
     --primary-active    mesma cor ~20% mais escura (state :active)
     --primary-soft      cor primária com alpha 10% (backgrounds suaves)
     --primary-rgb       triplet RGB da primária (para uso em rgba())
     --focus-ring        sombra de foco (rgba 25% sobre a primária)
     --color-primary     alias legado — mesmo valor que --primary
     --color-secondary   alias legado — mesmo valor que --primary-hover
     --primary-dark      alias legado — mesmo valor que --primary-hover
     --gradient-brand-*  aliases legados com cor sólida da paleta de área
     --shadow-brand      alias legado sem elevação por padrão

   Ao adicionar componente novo, SEMPRE usar tokens.
   Cores semânticas independentes da área (success, danger, info, warning)
   permanecem com hex — esse contrato é universal.
   ==================================== */

/* Fallback raiz — tenant default PathCapital, alinhado a Pathbit/Path Desk. */
:root {
  --primary: var(--color-primary);
  --primary-hover: var(--color-secondary);
  --primary-active: var(--color-purple-deep-900);
  --primary-soft: rgba(109, 40, 217, 0.1);
  --primary-rgb: 109, 40, 217;
  --focus-ring: 0 0 0 0.2rem rgba(109, 40, 217, 0.22);
  --primary-dark: var(--color-secondary); /* legado */
  --text-main: var(--color-text-main);
  --border-subtle: var(--color-border-subtle);
}

/* ──────────────────────────────────────
   Customer area — Pathbit violet (#6d28d9)
   ────────────────────────────────────── */
.customer-auth,
.customer-dashboard,
.customer-area,
.area-customer {
  --primary: var(--color-primary);
  --primary-hover: var(--color-secondary);
  --primary-active: var(--color-purple-deep-900);
  --primary-soft: rgba(109, 40, 217, 0.1);
  --primary-rgb: 109, 40, 217;
  --focus-ring: 0 0 0 0.2rem rgba(109, 40, 217, 0.22);

  /* Aliases legados — manter por compatibilidade com CSS existente. */
  --primary-dark: var(--color-purple-deep-900);
  --color-primary: #6d28d9;
  --color-secondary: #5b21b6;
  --gradient-brand-main: var(--color-primary, var(--color-primary));
  --gradient-brand-hover: var(--color-primary-hover, var(--color-secondary));
  --shadow-brand: transparent;
}

/* ──────────────────────────────────────
   Partner area — Pathbit dark violet (#2c1058)
   ────────────────────────────────────── */
.partner-auth,
.partner-dashboard,
.partner-area,
.area-partner {
  --primary: var(--color-purple-deep-900);
  --primary-hover: var(--color-purple-deep-950);
  --primary-active: var(--color-purple-deep-950);
  --primary-soft: rgba(44, 16, 88, 0.1);
  --primary-rgb: 44, 16, 88;
  --focus-ring: 0 0 0 0.2rem rgba(44, 16, 88, 0.22);

  --primary-dark: var(--color-purple-deep-950);
  --color-primary: var(--color-purple-deep-900);
  --color-secondary: var(--color-purple-deep-950);
  --gradient-brand-main: var(--color-primary, var(--color-purple-deep-900));
  --gradient-brand-hover: var(--color-primary-hover, var(--color-purple-deep-950));
  --shadow-brand: transparent;
}

/* ──────────────────────────────────────
   Admin area — Pathbit dark shell (#262626)
   ────────────────────────────────────── */
.admin-auth,
.admin-dashboard,
.admin-area,
.area-admin {
  --primary: var(--color-neutral-900);
  --primary-hover: var(--color-black);
  --primary-active: var(--color-black);
  --primary-soft: rgba(38, 38, 38, 0.1);
  --primary-rgb: 38, 38, 38;
  --focus-ring: 0 0 0 0.2rem rgba(38, 38, 38, 0.22);

  --primary-dark: var(--color-black);
  --color-primary: var(--color-neutral-900);
  --color-secondary: var(--color-black);
  --gradient-brand-main: var(--color-primary, var(--color-neutral-900));
  --gradient-brand-hover: var(--color-primary-hover, var(--color-black));
  --shadow-brand: transparent;
}