/*
 * GuiaChat — Design Tokens v1 (12/05/2026)
 *
 * Ponto único de verdade da paleta. Trocar valor aqui = troca em todo lugar
 * que usa var(--gc-*). Garante rollback trivial: revert nesse arquivo basta.
 *
 * Paleta oficial (cores da LOGO, 02/10/2026 — antes o primary era #4A72B2):
 *   #14639E azul da logo      → primary (tema claro) · #2577B8 no escuro (contraste)
 *   #08335E marinho da logo   → primary-800 (texto "GuiaChat" da logo)
 *   #F4813F laranja vibrante  → accent (CTAs)
 *   #D98256 terracota         → secondary
 *
 * Princípio: nem branco puro nem preto puro. Dark mode com fundos quase-pretos,
 * texto quase-branco. Contraste WCAG AA respeitado nos pares texto×fundo.
 */

:root {
  /* ─── Marca ─────────────────────────────────────────────────────────── */
  --gc-primary:        #2577B8;  /* escuro: tom claro do azul da logo (3,8:1 no fundo; branco em cima 4,8:1) */
  --gc-primary-50:     #E8F1F8;
  --gc-primary-100:    #C6DCEE;
  --gc-primary-200:    #9EC3E2;
  --gc-primary-300:    #6FA6D2;
  --gc-primary-400:    #3F86BE;
  --gc-primary-500:    #14639E;  /* base — azul da logo */
  --gc-primary-600:    #0F558A;
  --gc-primary-700:    #0B4675;
  --gc-primary-800:    #08335E;  /* marinho do texto da logo */
  --gc-primary-900:    #052440;

  --gc-accent:         #F4813F;
  --gc-accent-50:      #FDEFE5;
  --gc-accent-100:     #FBD4B7;
  --gc-accent-200:     #F8B889;
  --gc-accent-300:     #F69D5C;
  --gc-accent-400:     #F58F4E;
  --gc-accent-500:     #F4813F;  /* base */
  --gc-accent-600:     #DA6620;
  --gc-accent-700:     #A24C18;
  --gc-accent-800:     #6B3210;
  --gc-accent-900:     #341908;

  --gc-secondary:      #D98256;
  --gc-secondary-50:   #FBEEE5;
  --gc-secondary-100:  #F3CDB6;
  --gc-secondary-200:  #ECAC87;
  --gc-secondary-300:  #E49758;
  --gc-secondary-400:  #DF8C57;
  --gc-secondary-500:  #D98256;  /* base */
  --gc-secondary-600:  #B96434;
  --gc-secondary-700:  #884A26;
  --gc-secondary-800:  #573019;
  --gc-secondary-900:  #2C180C;

  /* ─── Fundos (dark) ─────────────────────────────────────────────────── */
  --gc-bg:             #131722;   /* fundo principal, quase-preto azulado */
  --gc-bg-elev-1:      #1A1F2E;   /* card, panel — um degrau acima */
  /* Alias de --gc-bg-elev-1. NAO e' decorativo: o nome --gc-card-bg ja' era usado em
     10 telas (e documentado no CLAUDE.md) sem NUNCA ter sido definido aqui. Todas caiam
     no fallback do var() — normalmente '#fff' —, o que no tema escuro dava card branco
     de texto quase branco. Definir o alias conserta todas de uma vez e faz o doc virar
     verdade, em vez de exigir que cada tela seja reescrita. */
  --gc-card-bg:        #1A1F2E;
  --gc-bg-elev-2:      #232938;   /* hover, input bg, drawer */
  --gc-bg-elev-3:      #2D3447;   /* destaque dentro de card */
  --gc-bg-overlay:     rgba(10, 13, 20, 0.7);  /* backdrop modal */

  /* ─── Texto ─────────────────────────────────────────────────────────── */
  --gc-text:           #E8ECF3;   /* texto principal, quase-branco */
  --gc-text-muted:     #9AA4B8;   /* labels, hints, metadados */
  --gc-text-dim:       #6B7488;   /* placeholder, disabled */
  --gc-text-inverse:   #131722;   /* texto em fundo claro (badge no laranja) */

  /* ─── Bordas ────────────────────────────────────────────────────────── */
  --gc-border:         #2D3447;
  --gc-border-strong:  #3D465C;
  --gc-border-focus:   var(--gc-primary-400);

  /* ─── Estados ───────────────────────────────────────────────────────── */
  --gc-success:        #3DB67A;
  --gc-success-bg:     #1A3A2A;
  --gc-warning:        #E5A642;
  --gc-warning-bg:     #3B2E14;
  --gc-danger:         #E5614A;
  --gc-danger-bg:      #3B1B14;
  /* Vermelho de PREENCHIMENTO — fundo com texto branco (hover do btn-outline-danger,
     cabecalho de modal bg-danger). Branco sobre o --gc-danger da' 3,4:1, abaixo do
     WCAG AA; sobre este da' 6,0:1, nos dois temas. */
  --gc-danger-strong:  #B03A28;
  --gc-info:           var(--gc-primary-400);
  --gc-info-bg:        var(--gc-primary-900);

  /* ─── Tipografia ────────────────────────────────────────────────────── */
  --gc-font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;
  --gc-font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                       Consolas, "Liberation Mono", monospace;

  --gc-fs-xs:          0.75rem;   /* 12px */
  --gc-fs-sm:          0.875rem;  /* 14px */
  --gc-fs-base:        1rem;      /* 16px */
  --gc-fs-md:          1.125rem;  /* 18px */
  --gc-fs-lg:          1.25rem;   /* 20px */
  --gc-fs-xl:          1.5rem;    /* 24px */
  --gc-fs-2xl:         2rem;      /* 32px */
  --gc-fs-3xl:         2.5rem;    /* 40px */
  --gc-fs-4xl:         3rem;      /* 48px */

  --gc-fw-regular:     400;
  --gc-fw-medium:      500;
  --gc-fw-semibold:    600;
  --gc-fw-bold:        700;

  /* ─── Espaçamento ───────────────────────────────────────────────────── */
  --gc-space-1:        0.25rem;   /* 4px  */
  --gc-space-2:        0.5rem;    /* 8px  */
  --gc-space-3:        0.75rem;   /* 12px */
  --gc-space-4:        1rem;      /* 16px */
  --gc-space-5:        1.5rem;    /* 24px */
  --gc-space-6:        2rem;      /* 32px */
  --gc-space-8:        3rem;      /* 48px */
  --gc-space-10:       4rem;      /* 64px */

  /* ─── Raios ─────────────────────────────────────────────────────────── */
  --gc-radius-sm:      4px;
  --gc-radius:         8px;
  --gc-radius-lg:      12px;
  --gc-radius-xl:      16px;
  --gc-radius-pill:    999px;

  /* ─── Sombras ───────────────────────────────────────────────────────── */
  --gc-shadow-sm:      0 1px 2px rgba(0,0,0,0.18);
  --gc-shadow:         0 4px 12px rgba(0,0,0,0.25);
  --gc-shadow-lg:      0 12px 32px rgba(0,0,0,0.35);
  --gc-shadow-focus:   0 0 0 3px rgba(20, 99, 158, 0.35);  /* primary @ 35% */

  /* ─── Gradientes ────────────────────────────────────────────────────── */
  --gc-gradient-brand:    linear-gradient(135deg, var(--gc-primary) 0%, var(--gc-accent) 100%);
  --gc-gradient-bg:       radial-gradient(ellipse at top left,
                            rgba(20, 99, 158, 0.18) 0%,
                            transparent 60%),
                          radial-gradient(ellipse at bottom right,
                            rgba(244, 129, 63, 0.10) 0%,
                            transparent 60%),
                          var(--gc-bg);

  /* ─── Transições ────────────────────────────────────────────────────── */
  --gc-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --gc-transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
  --gc-transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════════
 * TEMA LIGHT
 * ─────────────────────────────────────────────────────────────────────
 * Sobrescreve apenas tokens que precisam inverter pra um tema claro.
 * Cores de marca (primary/accent/secondary) PERMANECEM iguais — são
 * identidade visual, não mudam entre temas. Só fundo/texto/borda muda.
 *
 * Ativado quando body tem a classe `light-mode` (ao invés de `dark-mode`).
 * Contraste WCAG AA validado em todos pares texto×fundo.
 * ════════════════════════════════════════════════════════════════════ */
body.gc-theme-v2.light-mode {
  /* Fundos — fundo levemente acinzentado + cards brancos puros = cards "saltam"
     do fundo (padrao macOS/Slack/Notion). Antes o fundo era #F5F7FA (95%
     branco) e os cards #FFFFFF (100%) — diferenca minima fazia tudo parecer
     uma chapa branca. Agora o fundo eh #E9EEF4 (~91%) dando uma profundidade
     real sem ofuscar nada. */
  --gc-bg:             #E9EEF4;   /* fundo principal (mais cinza que antes) */
  --gc-bg-elev-1:      #FFFFFF;   /* cards / panels — branco puro pra destacar */
  /* Alias de --gc-bg-elev-1. NAO e' decorativo: o nome --gc-card-bg ja' era usado em
     10 telas (e documentado no CLAUDE.md) sem NUNCA ter sido definido aqui. Todas caiam
     no fallback do var() — normalmente '#fff' —, o que no tema escuro dava card branco
     de texto quase branco. Definir o alias conserta todas de uma vez e faz o doc virar
     verdade, em vez de exigir que cada tela seja reescrita. */
  --gc-card-bg:        #FFFFFF;
  --gc-bg-elev-2:      #F1F4F8;   /* inputs / hover — entre fundo e card */
  --gc-bg-elev-3:      #DDE3EC;   /* destaque dentro de card */
  --gc-bg-overlay:     rgba(20, 25, 38, 0.5);  /* backdrop modal */

  /* Texto — quase-preto pra não cansar */
  --gc-text:           #1F2937;   /* corpo */
  --gc-text-muted:     #455366;   /* labels, metadados — ~8.5:1 contra bg (AAA) */
  --gc-text-dim:       #6B7689;   /* placeholder / disabled — ~5.2:1 (AA pra texto normal) */
  --gc-text-inverse:   #FFFFFF;   /* texto em fundo colorido */

  /* Bordas — um pouco mais marcadas pra desenhar o contorno dos cards.
     Antes era #D7DCE3 (quase imperceptivel em fundo claro). */
  --gc-border:         #CBD3DD;
  --gc-border-strong:  #A8B3C1;
  --gc-border-focus:   var(--gc-primary);
  /* Claro: azul da logo puro (5,4:1 no fundo; branco em cima 6,3:1). */
  --gc-primary:        #14639E;

  /* Estados — fundos suaves em light */
  --gc-success-bg:     #E3F4EA;
  --gc-warning-bg:     #FBF1D9;
  --gc-danger-bg:      #FCE3DE;
  --gc-info-bg:        #E5EDF8;
  /* Vermelho de TEXTO no claro (btn-outline-danger, text-danger). O #E5614A dava
     3,4:1 no card branco e 2,9:1 no fundo da pagina. #B03A28 da' 6,0:1 no branco e
     4,7:1 no pior fundo claro (#DDE3EC). No escuro o #E5614A segue (4,8:1 no card). */
  --gc-danger:         #B03A28;

  /* Sombras um pouco mais marcadas pra dar profundidade real aos cards
     (antes eram sutis demais — agora dao um "lift" sem virar pesadas). */
  --gc-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.08);
  --gc-shadow:         0 4px 14px rgba(15, 23, 42, 0.10);
  --gc-shadow-lg:      0 14px 38px rgba(15, 23, 42, 0.15);
  --gc-shadow-focus:   0 0 0 3px rgba(20, 99, 158, 0.20);

  /* Gradiente do background com tons pastel da marca em fundo claro */
  --gc-gradient-bg:    radial-gradient(ellipse at top left,
                          rgba(20, 99, 158, 0.10) 0%,
                          transparent 60%),
                       radial-gradient(ellipse at bottom right,
                          rgba(244, 129, 63, 0.08) 0%,
                          transparent 60%),
                       var(--gc-bg);
}