/* Tema do Robust Hub, com base em docs/design-system.md. Toda cor, fonte, medida e tempo do
   Hub sai daqui. Para mudar o visual, altere só este arquivo.

   Os componentes usam só os tokens de papel (superfície, texto, borda, overlay), nunca as cores
   base direto. É isso que permite trocar o tema sem mexer em components.css.

   Breakpoints (CSS não aceita variável em @media, por isso ficam escritos aqui e nos arquivos):
   mobile é o padrão; tablet a partir de 768px; desktop a partir de 1024px. */
:root {
  /* Cores base */
  --hub-orange: #ff8800;
  --hub-orange-hover: #e67e00;
  --hub-orange-active: #d97700;
  --hub-light-gray: #f2f2f4;
  --hub-navy: #03111c;
  --hub-white: #ffffff;

  /* Superfícies */
  --hub-background: #f9f9fc;                   /* fundo da página: cinza quase branco, para os cards brancos se destacarem */
  --hub-surface: var(--hub-white);             /* cartão, cabeçalho, menu, dialog, campo */
  --hub-surface-muted: var(--hub-light-gray);  /* fundo de destaque leve: cabeçalho de tabela, etiqueta, item em foco */
  /* Corpo do chat, com o clima do WhatsApp: fundo bege com a nossa textura, recebida branca e
     enviada em amarelo suave. Autor e hora nos balões usam um cinza mais escuro que o secundário,
     para passar de 4,5:1 no amarelo (o secundário dá 4,34:1). */
  --hub-chat-background: #efeae2;
  --hub-chat-pattern: url("../imgs/chat-pattern.svg");
  --hub-bubble-in: var(--hub-white);
  --hub-bubble-out: #fff3c4;
  --hub-bubble-meta: #5c5f66;
  --hub-tick-read: #0a8bd6;                    /* tiques de lida: azul do WhatsApp, escurecido para 3,3:1 no amarelo */
  --hub-bubble-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); /* sombra leve dos balões e pílulas do chat */
  --hub-tooltip-bg: var(--hub-navy);           /* tooltip: escuro no tema claro, claro no escuro */
  --hub-tooltip-text: var(--hub-white);
  --hub-button-padding: 10px 16px;
  --hub-button-secondary: #f5f5f7;             /* fundo do botão cinza dentro de cards, janelas e menus */
  --hub-button-secondary-page: var(--hub-surface); /* o botão cinza direto sobre o fundo da página: branco */
  --hub-table-background: var(--hub-surface);  /* tabela (ui.Table) no desktop: branca sobre o fundo da página */
  --hub-surface-hover: var(--hub-border);      /* botão secundário com o mouse em cima */
  --hub-surface-active: var(--hub-disabled);   /* botão secundário pressionado */
  --hub-public-background: var(--hub-light-gray); /* fundo da tela de login */
  --hub-overlay: rgba(3, 17, 28, 0.5);         /* fundo escurecido atrás de dialog e aside */

  /* Texto */
  --hub-text: var(--hub-navy);
  --hub-text-secondary: #6b7280;
  --hub-text-tertiary: #9ca3af;

  /* Texto sobre o botão primário. Branco segue o design system, mas o contraste real com o
     laranja é 2.39:1. Com var(--hub-navy) passa a 7.97:1. */
  --hub-button-primary-text: var(--hub-white);
  --hub-button-danger: #b91c1c;                /* confirmar ação destrutiva: texto branco a 6,5:1 */
  --hub-button-danger-hover: #991b1b;

  /* Bordas e foco */
  --hub-border: #e5e7eb;
  --hub-border-subtle: #f3f4f6;
  --hub-focus: var(--hub-navy);                /* contorno de foco pelo teclado */
  --hub-focus-glow: rgba(255, 136, 0, 0.1);    /* halo do campo em foco */

  /* Barras de rolagem: alça translúcida sobre um trilho um pouco mais escuro que o fundo
     (regras em base.css). */
  --hub-scrollbar-track: rgba(0, 0, 0, 0.05);
  --hub-scrollbar-thumb: rgba(3, 17, 28, 0.18);
  --hub-scrollbar-thumb-hover: rgba(3, 17, 28, 0.34);
  --hub-scrollbar-size: 10px;

  /* Ícones: todos na cor primária. No tema claro, o laranja da marca (#ff8800) tem contraste de
     2,39:1 sobre branco, abaixo do mínimo de 3:1 para ícone que é botão (WCAG AA). Por isso o ícone
     usa o laranja um tom mais fechado, que passa no branco (3,41:1) e no cinza de fundo dos estados
     de toque e dos itens de menu (#f2f2f4, 3,05:1). No escuro, vale o laranja da marca. */
  --hub-orange-icon: #d17300;
  --hub-icon: var(--hub-orange-icon);
  /* Título na cor primária, como o dos cards de app. Só em texto grande (20px em negrito ou maior):
     o laranja do tema claro dá 3,41:1, que passa para texto grande (3:1), mas não para texto comum
     (4,5:1). */
  --hub-heading-accent: var(--hub-icon);

  /* Estados */
  --hub-success: #10b981;
  --hub-success-bg: #ecfdf5;
  --hub-success-text: #047857;
  --hub-warning: #f59e0b;
  --hub-warning-bg: #fef3c7;
  --hub-warning-text: #92400e;
  --hub-failure: #ef4444;
  --hub-failure-bg: #fee2e2;
  --hub-failure-text: #b91c1c;
  --hub-info: #3b82f6;
  --hub-info-bg: #eff6ff;
  --hub-info-text: #1d4ed8;
  /* Ícone colorido, sem fundo (popup de alerta): no mínimo 3:1 sobre a superfície. O amarelo
     #f59e0b dá só 2,1:1 sobre branco; o #d97706 dá 3,2:1. */
  --hub-warning-icon: #d97706;
  --hub-failure-icon: var(--hub-failure);
  --hub-info-icon: var(--hub-info);
  --hub-disabled: #d1d5db;

  /* Tipografia */
  --hub-font-heading: "Nunito", system-ui, sans-serif;
  --hub-font-body: "Sora", system-ui, sans-serif;

  /* Espaçamento (base de 8px) */
  --hub-xs: 4px;
  --hub-sm: 8px;
  --hub-md: 16px;
  --hub-lg: 24px;
  --hub-xl: 32px;
  --hub-2xl: 48px;
  --hub-3xl: 64px;

  /* Formas */
  --hub-radius-small: 8px;
  --hub-radius-card: 12px;
  --hub-radius-tag: 20px;
  --hub-radius-sheet: 16px;                    /* cantos de cima do painel que sobe no celular */
  --hub-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --hub-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --hub-shadow-floating: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Movimento */
  --hub-time-hover: 0.2s;
  --hub-time-focus: 0.3s;
  --hub-time-appear: 1.5s;                     /* entrada dos cartões da página */
  --hub-time-enter: 200ms;                     /* abrir dialog, menu, toast e alerta */
  --hub-time-leave: 150ms;                     /* fechar: um pouco mais rápido que abrir */
  --hub-time-aside: 240ms;                     /* painel lateral entrando */
  --hub-time-aside-leave: 200ms;               /* painel lateral saindo */
  --hub-time-sheet: 260ms;                     /* painel subindo do rodapé, no celular */
  --hub-time-sheet-leave: 200ms;               /* painel descendo, no celular */
  --hub-ease-enter: cubic-bezier(0.2, 0, 0, 1); /* desacelera ao chegar */
  --hub-ease-leave: cubic-bezier(0.4, 0, 1, 1); /* acelera ao sair */
  --hub-tooltip-delay: 300ms;                  /* espera do tooltip: não pisca quando o mouse só passa */
  --hub-motion-distance: 8px;                  /* quanto o elemento desliza ao entrar e sair */

  /* Estrutura (valores do celular; tablet e desktop logo abaixo) */
  --hub-header-height: 64px;
  --hub-gutter: var(--hub-md);                 /* margem lateral da página */
  --hub-page-top: var(--hub-lg);
  --hub-page-bottom: var(--hub-2xl);
  --hub-logo-height: 36px;
  --hub-logo-height-public: 56px;
  --hub-avatar-size: 40px;
  --hub-icon-size: 20px;
  --hub-app-icon-size: 28px;
  --hub-touch: 44px;                           /* menor área de toque */
  --hub-touch-small: 30px;                     /* botão pequeno: só ações secundárias (WCAG pede 24px) */
  --hub-icon-size-small: 14px;
  --hub-safe-top: env(safe-area-inset-top, 0px);       /* recortes da tela (notch, barra do iPhone) */
  --hub-safe-right: env(safe-area-inset-right, 0px);
  --hub-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hub-safe-left: env(safe-area-inset-left, 0px);
  /* Espaços por papel: no celular, os de sempre; no desktop (bloco abaixo), um degrau acima, para
     tudo respirar. Os botões não usam estes tokens. Ajuste aqui, à mão. */
  --hub-space-field: 4px;                      /* do rótulo ao campo */
  --hub-space-stack: 16px;                     /* entre campos e entre blocos */
  --hub-space-inside: 24px;                    /* dentro de dialog, aside, card e janela de dados */
  --hub-space-bar: 16px;                       /* altura do cabeçalho e do rodapé de dialog e aside */
  --hub-space-item: 16px;                      /* dentro do item de lista */
  --hub-space-list: 8px;                       /* entre itens de lista */
  --hub-space-divider: 8px;                    /* antes das linhas internas do card */
  --hub-tooltip-padding: 8px 16px;
  --hub-tag-padding: 6px 12px;
  --hub-menu-item-padding: 12px 8px;
  --hub-bubble-padding: 8px 12px;
  --hub-menu-width: 240px;
  --hub-aside-width: 580px;
  --hub-dialog-width: 480px;
  --hub-public-width: 400px;
  --hub-toast-width: 400px;
  --hub-max-width: 1556px;

  /* Switch (chave de liga e desliga) */
  --hub-switch-off: var(--hub-text-secondary);
  --hub-switch-on: var(--hub-orange);
  --hub-switch-knob: var(--hub-white);

  /* Logomarca: qual das duas versões aparece */
  --hub-logo-light: block;
  --hub-logo-dark: none;

  color-scheme: light;

  /* Paleta do tema escuro. Para mudar as cores escuras, altere só estes valores: os dois blocos
     do fim do arquivo apenas os ligam aos tokens de papel. */
  --hub-dark-background: #03111c;              /* o navy da marca */
  --hub-dark-surface: #0b1d2b;
  --hub-dark-surface-muted: #132a3b;
  --hub-dark-chat-background: #0b141a;        /* corpo do chat */
  --hub-dark-chat-pattern: url("../imgs/chat-pattern-dark.svg");
  --hub-dark-bubble-in: #1f2c34;              /* mensagem recebida */
  --hub-dark-bubble-out: #4a3b12;             /* mensagem enviada: âmbar fechado */
  --hub-dark-bubble-meta: var(--hub-dark-text-secondary);
  --hub-dark-bubble-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3);
  --hub-dark-surface-hover: #1c374b;
  --hub-dark-surface-active: #26465e;
  --hub-dark-border: #1f3b50;
  --hub-dark-border-subtle: #162f42;
  --hub-dark-text: #e6edf3;
  --hub-dark-text-secondary: #9db0c0;
  --hub-dark-text-tertiary: #6e8598;
  --hub-dark-overlay: rgba(0, 0, 0, 0.6);
  --hub-dark-focus-glow: rgba(255, 136, 0, 0.25);
  --hub-dark-scrollbar-track: rgba(0, 0, 0, 0.2);   /* no navy, 5% não aparece */
  --hub-dark-scrollbar-thumb: rgba(230, 237, 243, 0.16);
  --hub-dark-scrollbar-thumb-hover: rgba(230, 237, 243, 0.32);
  --hub-dark-success-bg: #0c2e24;
  --hub-dark-success-text: #6ee7b7;
  --hub-dark-warning-bg: #34280b;
  --hub-dark-warning-text: #fcd34d;
  --hub-dark-failure-bg: #3b1518;
  --hub-dark-failure-text: #fca5a5;
  --hub-dark-button-danger: #dc2626;           /* texto branco a 4,8:1 */
  --hub-dark-button-danger-hover: #b91c1c;
  --hub-dark-info-bg: #0f2547;
  --hub-dark-info-text: #93c5fd;
  --hub-dark-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --hub-dark-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
  --hub-dark-shadow-floating: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* Tablet e desktop */
@media (min-width: 768px) {
  :root {
    --hub-header-height: 72px;
    --hub-space-field: 8px;
    --hub-space-stack: 24px;
    --hub-space-inside: 32px;
    --hub-space-bar: 20px;
    --hub-space-item: 24px;
    --hub-space-list: 12px;
    --hub-space-divider: 16px;
    --hub-tooltip-padding: 12px 20px;
    --hub-tag-padding: 6px 16px;
    --hub-menu-item-padding: 10px 16px;
    --hub-bubble-padding: 10px 16px;
    --hub-gutter: var(--hub-lg);
    --hub-page-top: var(--hub-xl);
    --hub-page-bottom: var(--hub-3xl);
  }
}

/* Tema escuro, escolhido em "Minha conta". */
:root[data-theme="dark"] {
  color-scheme: dark;
  --hub-background: var(--hub-dark-background);
  --hub-surface: var(--hub-dark-surface);
  --hub-surface-muted: var(--hub-dark-surface-muted);
  --hub-chat-background: var(--hub-dark-chat-background);
  --hub-chat-pattern: var(--hub-dark-chat-pattern);
  --hub-bubble-in: var(--hub-dark-bubble-in);
  --hub-bubble-out: var(--hub-dark-bubble-out);
  --hub-bubble-meta: var(--hub-dark-bubble-meta);
  --hub-tick-read: #53bdeb;
  --hub-bubble-shadow: var(--hub-dark-bubble-shadow);
  --hub-tooltip-bg: var(--hub-dark-text);
  --hub-tooltip-text: var(--hub-dark-background);
  --hub-button-secondary: var(--hub-dark-surface-muted);
  --hub-button-secondary-page: var(--hub-dark-surface-muted);
  --hub-table-background: transparent;
  --hub-surface-hover: var(--hub-dark-surface-hover);
  --hub-surface-active: var(--hub-dark-surface-active);
  --hub-public-background: var(--hub-dark-background);
  --hub-overlay: var(--hub-dark-overlay);
  --hub-text: var(--hub-dark-text);
  --hub-text-secondary: var(--hub-dark-text-secondary);
  --hub-text-tertiary: var(--hub-dark-text-tertiary);
  --hub-border: var(--hub-dark-border);
  --hub-border-subtle: var(--hub-dark-border-subtle);
  --hub-focus: var(--hub-dark-text);
  --hub-focus-glow: var(--hub-dark-focus-glow);
  --hub-scrollbar-track: var(--hub-dark-scrollbar-track);
  --hub-scrollbar-thumb: var(--hub-dark-scrollbar-thumb);
  --hub-scrollbar-thumb-hover: var(--hub-dark-scrollbar-thumb-hover);
  --hub-disabled: var(--hub-dark-surface-active);
  --hub-success-bg: var(--hub-dark-success-bg);
  --hub-success-text: var(--hub-dark-success-text);
  --hub-warning-bg: var(--hub-dark-warning-bg);
  --hub-warning-text: var(--hub-dark-warning-text);
  --hub-failure-bg: var(--hub-dark-failure-bg);
  --hub-failure-text: var(--hub-dark-failure-text);
  --hub-button-danger: var(--hub-dark-button-danger);
  --hub-button-danger-hover: var(--hub-dark-button-danger-hover);
  --hub-info-bg: var(--hub-dark-info-bg);
  --hub-info-text: var(--hub-dark-info-text);
  --hub-warning-icon: var(--hub-dark-warning-text);
  --hub-failure-icon: var(--hub-dark-failure-text);
  --hub-info-icon: var(--hub-dark-info-text);
  --hub-shadow: var(--hub-dark-shadow);
  --hub-shadow-hover: var(--hub-dark-shadow-hover);
  --hub-shadow-floating: var(--hub-dark-shadow-floating);
  --hub-switch-off: var(--hub-dark-surface-active);
  --hub-logo-light: none;
  --hub-logo-dark: block;
  --hub-icon: var(--hub-orange);
}

/* Tema escuro do aparelho, para quem ainda não escolheu. Este bloco precisa ser igual ao de cima:
   o teste TestDarkThemeBlocksMatch confere. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --hub-background: var(--hub-dark-background);
    --hub-surface: var(--hub-dark-surface);
    --hub-surface-muted: var(--hub-dark-surface-muted);
    --hub-chat-background: var(--hub-dark-chat-background);
    --hub-chat-pattern: var(--hub-dark-chat-pattern);
    --hub-bubble-in: var(--hub-dark-bubble-in);
    --hub-bubble-out: var(--hub-dark-bubble-out);
    --hub-bubble-meta: var(--hub-dark-bubble-meta);
    --hub-tick-read: #53bdeb;
    --hub-bubble-shadow: var(--hub-dark-bubble-shadow);
    --hub-tooltip-bg: var(--hub-dark-text);
    --hub-tooltip-text: var(--hub-dark-background);
    --hub-button-secondary: var(--hub-dark-surface-muted);
    --hub-button-secondary-page: var(--hub-dark-surface-muted);
    --hub-table-background: transparent;
    --hub-surface-hover: var(--hub-dark-surface-hover);
    --hub-surface-active: var(--hub-dark-surface-active);
    --hub-public-background: var(--hub-dark-background);
    --hub-overlay: var(--hub-dark-overlay);
    --hub-text: var(--hub-dark-text);
    --hub-text-secondary: var(--hub-dark-text-secondary);
    --hub-text-tertiary: var(--hub-dark-text-tertiary);
    --hub-border: var(--hub-dark-border);
    --hub-border-subtle: var(--hub-dark-border-subtle);
    --hub-focus: var(--hub-dark-text);
    --hub-focus-glow: var(--hub-dark-focus-glow);
    --hub-scrollbar-track: var(--hub-dark-scrollbar-track);
    --hub-scrollbar-thumb: var(--hub-dark-scrollbar-thumb);
    --hub-scrollbar-thumb-hover: var(--hub-dark-scrollbar-thumb-hover);
    --hub-disabled: var(--hub-dark-surface-active);
    --hub-success-bg: var(--hub-dark-success-bg);
    --hub-success-text: var(--hub-dark-success-text);
    --hub-warning-bg: var(--hub-dark-warning-bg);
    --hub-warning-text: var(--hub-dark-warning-text);
    --hub-failure-bg: var(--hub-dark-failure-bg);
    --hub-failure-text: var(--hub-dark-failure-text);
    --hub-button-danger: var(--hub-dark-button-danger);
    --hub-button-danger-hover: var(--hub-dark-button-danger-hover);
    --hub-info-bg: var(--hub-dark-info-bg);
    --hub-info-text: var(--hub-dark-info-text);
    --hub-warning-icon: var(--hub-dark-warning-text);
    --hub-failure-icon: var(--hub-dark-failure-text);
    --hub-info-icon: var(--hub-dark-info-text);
    --hub-shadow: var(--hub-dark-shadow);
    --hub-shadow-hover: var(--hub-dark-shadow-hover);
    --hub-shadow-floating: var(--hub-dark-shadow-floating);
    --hub-switch-off: var(--hub-dark-surface-active);
    --hub-logo-light: none;
    --hub-logo-dark: block;
    --hub-icon: var(--hub-orange);
  }
}