/* cópia de marcas/Zroo/src/styles/tokens.css (2026-10-28) — não editar aqui */
/* =========================================================================
   Zroo — tokens de design
   Derivados do [ZROO] Brandbook. Toda cor, medida e peso tipográfico da
   interface sai daqui. Nada de hex solto nos componentes.
   ========================================================================= */

:root {
  /* --- Paleta de marca (brandbook pág. 10) --------------------------- */
  --zr-blue: #007df9; /* Azul Zroo   — corretor    */
  --zr-purple: #b022b3; /* Roxo Zroo   — proprietário */
  --zr-pink: #f70f9f; /* Rosa Zroo   — locatário   */
  --zr-ink: #14161a; /* Tinta       — texto principal */
  --zr-graphite: #3a3f47; /* Grafite     — texto de apoio  */
  --zr-gray: #edeff2; /* Cinza claro — fundos e divisores */
  --zr-white: #ffffff;

  /* Variações de trabalho de cada cor de marca */
  --zr-blue-strong: #0064d2;
  --zr-blue-soft: #e6f2fe;
  --zr-purple-strong: #98209c;
  --zr-purple-soft: #f7e9f7;
  --zr-pink-strong: #d5108b;
  --zr-pink-soft: #fee7f5;
  /* Passo claro ainda saturado — cada cor de público + 30% de branco. Serve à
     profundidade em motion e a gradiente sutil, não a fundo de área (para isso
     existe o -soft). Valores consolidados do sistema de motion. */
  --zr-blue-light: #4da4fb;
  --zr-purple-light: #c864ca;
  --zr-pink-light: #f957bc;

  /* Impressão (CMYK convertido). A cor mais viva do RGB não existe em tinta:
     estes são os valores dos arquivos "cmyk" da identidade (2026-09-15). Só
     para peça impressa e para o sufixo -cmyk em identidade/; tela usa os de cima. */
  --zr-blue-print: #2581c4;
  --zr-purple-print: #9338a3;
  --zr-pink-print: #d9328a;

  /* Ouro da Carteira Dourada (programa do corretor parceiro). Cor de objeto e
     de campanha, nunca de interface: não vira botão, texto nem fundo de área.
     Nasceu para a carteira metalizada em 3D da LP "ouro da Carteira Zroo"
     (cliente, 2026-10-28). Do mais claro ao mais escuro, para montar o metal. */
  --zr-gold-light: #fbe7a1;
  --zr-gold: #e2b33c;
  --zr-gold-strong: #b8861b;
  --zr-gold-deep: #7a560c;

  /* Verde de planta: árvore, jardim e varanda em ilustração e 3D. Cor de objeto,
     nunca de interface (não vira botão, texto nem fundo). Nasceu com os imóveis
     de maquete da carteira 3D da LP "ouro da Carteira Zroo" (cliente, 2026-10-28). */
  --zr-leaf-light: #7fd36b;
  --zr-leaf: #34a853;
  --zr-leaf-deep: #1e6b3a;

  /* --- Cores semânticas --------------------------------------------- */
  --zr-color-bg: var(--zr-white);
  --zr-color-surface: var(--zr-white);
  --zr-color-surface-muted: #f5f7fa;
  --zr-color-surface-sunken: var(--zr-gray);

  --zr-color-text: var(--zr-ink);
  --zr-color-text-subtle: var(--zr-graphite);
  --zr-color-text-muted: #6e747d;

  --zr-color-border: #e3e7ed;
  --zr-color-border-strong: #cfd5de;

  /* Estados — o brandbook não define cores de sistema, então derivamos
     tons que convivem com a paleta sem competir com ela. */
  --zr-color-success: #0f9d58;
  --zr-color-success-soft: #e6f6ee;
  --zr-color-warning: #b7791f;
  --zr-color-warning-soft: #fdf3e2;
  --zr-color-danger: #d92d20;
  --zr-color-danger-soft: #fdeceb;
  --zr-color-info: var(--zr-blue);
  --zr-color-info-soft: var(--zr-blue-soft);

  /* --- Acento por público (brandbook pág. 11) ------------------------
     Sem público definido a marca fala em azul + rosa. O ZrooProvider
     troca este bloco inteiro via [data-zroo-audience]. */
  --zr-accent: var(--zr-blue);
  --zr-accent-strong: var(--zr-blue-strong);
  --zr-accent-soft: var(--zr-blue-soft);
  --zr-accent-light: var(--zr-blue-light);
  --zr-accent-contrast: var(--zr-white);
  --zr-accent-ring: rgba(0, 125, 249, 0.28);
  --zr-accent-2: var(--zr-pink); /* o acento dos 10% */

  /* Gradiente de marca — conecta os três públicos. Usar com moderação. */
  --zr-gradient-brand: linear-gradient(
    90deg,
    var(--zr-blue) 0%,
    var(--zr-purple) 52%,
    var(--zr-pink) 100%
  );
  --zr-gradient-brand-diagonal: linear-gradient(
    135deg,
    var(--zr-blue) 0%,
    var(--zr-purple) 52%,
    var(--zr-pink) 100%
  );
  /* Fundo claro com um sopro das cores da marca — base de peça com texto
     explicativo, sem competir com a leitura. */
  --zr-gradient-tint: linear-gradient(
    155deg,
    rgba(0, 125, 249, 0.07) 0%,
    rgba(176, 34, 179, 0.05) 48%,
    rgba(247, 15, 159, 0.08) 100%
  );
  /* Degradê escuro para dar contraste ao logo sobre foto (pág. 08) */
  --zr-gradient-scrim: linear-gradient(
    180deg,
    rgba(20, 22, 26, 0) 0%,
    rgba(20, 22, 26, 0.72) 100%
  );

  /* --- Tipografia (brandbook pág. 13) -------------------------------- */
  --zr-font-family: 'Effra', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  /* Acento manuscrito — uma ou duas palavras, nunca corpo de texto. */
  --zr-font-family-hand: 'Adobe Handwriting', cursive;

  --zr-font-weight-regular: 400;
  --zr-font-weight-medium: 500; /* corpo de texto */
  --zr-font-weight-semibold: 600;
  --zr-font-weight-bold: 700;
  --zr-font-weight-black: 900; /* títulos */

  --zr-font-size-display: 3.5rem; /* 56px */
  --zr-font-size-h1: 2.5rem; /* 40px */
  --zr-font-size-h2: 2rem; /* 32px */
  --zr-font-size-h3: 1.5rem; /* 24px */
  --zr-font-size-h4: 1.25rem; /* 20px */
  --zr-font-size-lg: 1.125rem; /* 18px */
  --zr-font-size-md: 1rem; /* 16px */
  --zr-font-size-sm: 0.875rem; /* 14px */
  --zr-font-size-xs: 0.8125rem; /* 13px */
  --zr-font-size-2xs: 0.75rem; /* 12px */

  --zr-line-height-tight: 1.08;
  --zr-line-height-snug: 1.25;
  --zr-line-height-normal: 1.5;
  --zr-line-height-relaxed: 1.6;

  --zr-letter-spacing-display: -0.02em;
  --zr-letter-spacing-heading: -0.01em;
  --zr-letter-spacing-normal: 0;

  /* --- Espaçamento (base 4px) ---------------------------------------- */
  --zr-space-3xs: 0.125rem; /* 2  */
  --zr-space-2xs: 0.25rem; /* 4  */
  --zr-space-xs: 0.5rem; /* 8  */
  --zr-space-sm: 0.75rem; /* 12 */
  --zr-space-md: 1rem; /* 16 */
  --zr-space-lg: 1.5rem; /* 24 */
  --zr-space-xl: 2rem; /* 32 */
  --zr-space-2xl: 3rem; /* 48 */
  --zr-space-3xl: 4rem; /* 64 */
  --zr-space-4xl: 6rem; /* 96 */

  /* --- Raio — "cantos arredondados, sem arestas" (pág. 06) ----------- */
  --zr-radius-xs: 0.375rem; /* 6  */
  --zr-radius-sm: 0.5rem; /* 8  */
  --zr-radius-md: 0.75rem; /* 12 */
  --zr-radius-lg: 1rem; /* 16 */
  --zr-radius-xl: 1.5rem; /* 24 */
  --zr-radius-pill: 999px;

  /* --- Elevação ------------------------------------------------------ */
  --zr-shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06), 0 1px 1px rgba(20, 22, 26, 0.04);
  --zr-shadow-md: 0 4px 12px rgba(20, 22, 26, 0.08);
  --zr-shadow-lg: 0 16px 40px rgba(20, 22, 26, 0.14);
  --zr-shadow-xl: 0 24px 64px rgba(20, 22, 26, 0.18);

  /* --- Movimento ----------------------------------------------------- */
  --zr-duration-fast: 120ms;
  --zr-duration-base: 180ms;
  --zr-duration-slow: 280ms;
  --zr-easing: cubic-bezier(0.2, 0.8, 0.3, 1);

  /* --- Camadas -------------------------------------------------------- */
  --zr-z-dropdown: 1000;
  --zr-z-sticky: 1100;
  --zr-z-overlay: 1200;
  --zr-z-modal: 1300;
  --zr-z-toast: 1400;
  --zr-z-tooltip: 1500;

  /* --- Controles ------------------------------------------------------ */
  --zr-control-height-sm: 2rem; /* 32 */
  --zr-control-height-md: 2.75rem; /* 44 */
  --zr-control-height-lg: 3.25rem; /* 52 */
  --zr-focus-ring: 0 0 0 3px var(--zr-accent-ring);
}

/* =========================================================================
   Acento por público — "a cor fala com cada público" (brandbook pág. 11)
   ========================================================================= */

[data-zroo-audience='corretor'] {
  --zr-accent: var(--zr-blue);
  --zr-accent-strong: var(--zr-blue-strong);
  --zr-accent-soft: var(--zr-blue-soft);
  --zr-accent-light: var(--zr-blue-light);
  --zr-accent-ring: rgba(0, 125, 249, 0.28);
  --zr-accent-2: var(--zr-pink);
}

[data-zroo-audience='proprietario'] {
  --zr-accent: var(--zr-purple);
  --zr-accent-strong: var(--zr-purple-strong);
  --zr-accent-soft: var(--zr-purple-soft);
  --zr-accent-light: var(--zr-purple-light);
  --zr-accent-ring: rgba(176, 34, 179, 0.28);
  --zr-accent-2: var(--zr-pink);
}

[data-zroo-audience='locatario'] {
  --zr-accent: var(--zr-pink);
  --zr-accent-strong: var(--zr-pink-strong);
  --zr-accent-soft: var(--zr-pink-soft);
  --zr-accent-light: var(--zr-pink-light);
  --zr-accent-ring: rgba(247, 15, 159, 0.28);
  --zr-accent-2: var(--zr-blue);
}

[data-zroo-audience='institucional'] {
  --zr-accent: var(--zr-blue);
  --zr-accent-strong: var(--zr-blue-strong);
  --zr-accent-soft: var(--zr-blue-soft);
  --zr-accent-light: var(--zr-blue-light);
  --zr-accent-ring: rgba(0, 125, 249, 0.28);
  --zr-accent-2: var(--zr-pink);
}

/* =========================================================================
   Base
   ========================================================================= */

.zr-root {
  font-family: var(--zr-font-family);
  font-weight: var(--zr-font-weight-medium);
  font-size: var(--zr-font-size-md);
  line-height: var(--zr-line-height-relaxed);
  color: var(--zr-color-text);
  background-color: var(--zr-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.zr-root *,
[class^='zr-'],
[class^='zr-'] * {
  box-sizing: border-box;
}

/* Foco visível e consistente em todo o sistema */
[class^='zr-']:focus-visible {
  outline: 2px solid var(--zr-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  [class^='zr-'],
  [class^='zr-'] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}