/* =====================================================================
   PetHub — Tokens de marca
   ---------------------------------------------------------------------
   Fonte oficial: site-pet-hub-app/tailwind.config.ts (landing em produção)
   e PetHub/src/assets (logos). Regras de uso em assets/brand/README.md.
   Edite AQUI para mudar cores, fontes, raios e sombras do site inteiro.
   ===================================================================== */
:root {
  /* Roxo, cor primária */
  --brand-50: #F5F2FF;
  --brand-100: #EDE7FF;
  --brand-200: #DCD1FF;
  --brand-300: #C3B0FF;
  --brand-400: #9C82FA;
  --brand-500: #6B52F5;
  --brand-600: #5A40E8;
  --brand-700: #4A32C7;
  --brand-800: #3B289E;
  --brand-900: #2A1C70;

  /* Rosa, acento */
  --blush-50: #FFF2F8;
  --blush-100: #FFE0EF;
  --blush-200: #FFC2DF;
  --blush-400: #F55AA5;
  --blush-500: #E23D8C;
  --blush-600: #C22872;
  --blush-700: #A11D5E;

  /* Verde-limão, destaque pontual */
  --lime-200: #EBFFA8;
  --lime-300: #DCFF6B;
  --lime-400: #C6FF1A;
  --lime-500: #AEE800;

  /* Tinta e superfícies */
  --ink: #17122B;
  --ink-700: #23183F;
  --ink-600: #3D325C;
  --ink-500: #5E537B;
  --ink-400: #8B82A6;
  --ink-300: #B4ADC7;
  --line: #ECE5FF;
  --line-soft: #F3EFFF;
  --line-strong: #DCD1FF;
  --surface: #FFFFFF;
  --surface-soft: #F9F8FF;
  --surface-tint: #F5F2FF;
  --surface-dark: #17122B;
  --surface-deep: #231A42;

  /* Gradiente do símbolo (rosa em cima, roxo embaixo) */
  --brand-gradient: linear-gradient(180deg, #F55AA5 0%, #9C82FA 55%, #6B52F5 100%);
  --brand-gradient-diagonal: linear-gradient(135deg, #F55AA5 0%, #6B52F5 100%);

  /* ---- Cores dos CTAs (restaurado para o padrão roxo oficial) ---- */
  --cta: var(--brand-purple);
  --cta-hover: var(--brand-purple-deep);
  --cta-ink: #FFFFFF;
  --accent: var(--blush-600);
  --accent-deep: var(--blush-700);
  --accent-soft: var(--blush-100);

  /* ---- Nomes semânticos usados pelo CSS do site ---- */
  --brand-purple: var(--brand-500);
  --brand-purple-deep: var(--brand-600);
  --brand-purple-soft: var(--brand-100);
  --brand-pink: var(--blush-400);
  --brand-pink-soft: var(--blush-100);
  --brand-blue: var(--brand-400);
  --brand-lime: var(--lime-400);
  --brand-lime-soft: var(--lime-200);

  --bg-white: var(--surface);
  --bg-off-white: var(--surface-soft);
  --bg-dark: var(--ink);
  --bg-dark-card: var(--surface-deep);

  --text-heading: var(--ink);
  --text-body: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, .72);

  --border-light: var(--line);
  --border-strong: var(--line-strong);

  --success: #1C9C4B;
  --warning: #DB7706;
  --danger: #E5484D;
  --whatsapp: #25D366;

  /* Tipografia:
     - Display / Títulos / PageHeader: Bricolage Grotesque (Google Fonts, OFL),
       fonte com desenho quadrado, moderno e de alta personalidade.
     - Corpo de texto, UI e menus: Figtree (Google Fonts, OFL), limpa e legível. */
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Raios */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(23, 18, 43, .04), 0 4px 12px -6px rgba(107, 82, 245, .10);
  --shadow-md: 0 1px 2px rgba(23, 18, 43, .04), 0 12px 32px -12px rgba(107, 82, 245, .14);
  --shadow-lg: 0 2px 4px rgba(23, 18, 43, .05), 0 26px 54px -18px rgba(107, 82, 245, .26);
  --shadow-brand: 0 14px 30px -10px rgba(107, 82, 245, .45);

  /* Layout */
  --container: 1240px;
  --container-wide: 1360px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(64px, 9vw, 120px);
  --header-h: 72px;

  /* Movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
}

.theme-dark {
  --accent: var(--blush-400);
  --accent-soft: rgba(245, 90, 165, .16);
  --text-heading: var(--text-on-dark);
  --text-body: var(--text-on-dark-muted);
  --text-muted: rgba(255, 255, 255, .6);
  --border-light: rgba(255, 255, 255, .14);
  --border-strong: rgba(255, 255, 255, .28);
  color: var(--text-body);
}