/* ============================================================================
   goCents — fundação do design system
   ============================================================================

   Aqui só moram TOKENS e primitivas. Componentes ficam em ui.css.

   A regra que mantém isso útil: nenhuma tela escreve cor, espaçamento ou
   tamanho de fonte na mão. Se você precisou de um valor que não existe aqui,
   ou o token está faltando, ou a tela está inventando — e é a segunda opção
   que faz um produto parecer remendado.

   Escalas em vez de cores soltas: --cinza-100 até --cinza-900 dão contraste
   previsível, e trocar a marca vira trocar uma escala.
   ============================================================================ */

:root {
  color-scheme: light dark;

  /* ---- escala neutra ---- */
  --cinza-0:   #ffffff;
  --cinza-50:  #f8f9fb;
  --cinza-100: #f1f3f6;
  --cinza-200: #e4e8ed;
  --cinza-300: #cfd6de;
  --cinza-400: #9aa5b3;
  --cinza-500: #6b7787;
  --cinza-600: #4d5867;
  --cinza-700: #38414e;
  --cinza-800: #232a34;
  --cinza-900: #151a21;
  --cinza-950: #0d1117;

  /* ---- marca ---- */
  --marca-50:  #fff3ec;
  --marca-100: #ffe1d0;
  --marca-200: #ffc0a1;
  --marca-300: #ff9666;
  --marca-400: #f97316;
  --marca-500: #ea580c;
  --marca-600: #c2410c;
  --marca-700: #9a3412;
  --marca-800: #7c2d12;

  /* ---- sinalização ---- */
  --ok-100: #d9f5e3;  --ok-500: #0f9d58;  --ok-700: #0b6e3d;
  --aviso-100: #fdf0d0; --aviso-500: #d69e2e; --aviso-700: #92700f;
  --perigo-100: #fde4e2; --perigo-500: #e0453a; --perigo-700: #9b2820;
  --info-100: #dceafd; --info-500: #2f6fed; --info-700: #1d4ea8;

  /* ---- papéis semânticos: é isto que as telas usam ---- */
  --fundo: var(--cinza-50);
  --superficie: var(--cinza-0);
  --superficie-2: var(--cinza-100);
  --superficie-3: var(--cinza-200);
  --borda: var(--cinza-200);
  --borda-forte: var(--cinza-300);

  --texto: var(--cinza-900);
  --texto-2: var(--cinza-600);
  --texto-3: var(--cinza-500);
  --texto-invertido: var(--cinza-0);

  --marca: var(--marca-600);
  --marca-hover: var(--marca-700);
  --marca-suave: var(--marca-50);
  --marca-texto: var(--cinza-0);

  --ok: var(--ok-700);          --ok-suave: var(--ok-100);
  --aviso: var(--aviso-700);    --aviso-suave: var(--aviso-100);
  --perigo: var(--perigo-700);  --perigo-suave: var(--perigo-100);
  --info: var(--info-700);      --info-suave: var(--info-100);

  /* Barra lateral com fundo próprio, escuro nos dois temas: é o que separa
     navegação de conteúdo sem precisar de borda grossa. */
  --nav-fundo: var(--cinza-900);
  --nav-texto: var(--cinza-300);
  --nav-texto-ativo: var(--cinza-0);
  --nav-ativo: rgb(255 255 255 / 10%);
  --nav-hover: rgb(255 255 255 / 6%);

  /* ---- espaçamento: escala de 4 ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;

  /* Respiro que acompanha a tela. O espaçamento interno dos componentes fica
     fixo — botão não pode mudar de tamanho —, mas a margem da página e o vão
     entre blocos crescem, senão o conteúdo fica sufocado no monitor e
     desperdiçado no celular. */
  --s-borda-pagina: clamp(var(--s-4), 4vw, var(--s-7));
  --s-entre-blocos: clamp(var(--s-4), 2.5vw, var(--s-6));

  /* ---- raio ---- */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-cheio: 999px;

  /* ---- elevação ---- */
  --sombra-1: 0 1px 2px rgb(16 24 40 / 5%), 0 1px 3px rgb(16 24 40 / 8%);
  --sombra-2: 0 2px 4px rgb(16 24 40 / 6%), 0 4px 8px rgb(16 24 40 / 8%);
  --sombra-3: 0 4px 8px rgb(16 24 40 / 6%), 0 12px 24px rgb(16 24 40 / 10%);

  /* ---- tipografia fluida ----

     clamp(mínimo, preferido, máximo): o tamanho acompanha a largura da tela em
     vez de saltar num ponto de quebra. Um título que pula de 22px para 28px
     quando a janela cruza 900px chama atenção para o layout; crescendo junto,
     ninguém percebe — que é o objetivo.

     Os tamanhos pequenos quase não crescem: texto de apoio grande demais no
     monitor rouba a hierarquia do que importa. Quem cresce é o topo da escala. */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-xs:   clamp(0.75rem,   0.74rem + 0.05vw, 0.78rem);
  --t-sm:   clamp(0.8125rem, 0.80rem + 0.08vw, 0.875rem);
  --t-base: clamp(0.9375rem, 0.92rem + 0.10vw, 1rem);
  --t-md:   clamp(1rem,      0.97rem + 0.15vw, 1.0625rem);
  --t-lg:   clamp(1.125rem,  1.08rem + 0.22vw, 1.25rem);
  --t-xl:   clamp(1.25rem,   1.15rem + 0.50vw, 1.5rem);
  --t-2xl:  clamp(1.5rem,    1.30rem + 1.00vw, 2rem);
  --t-3xl:  clamp(1.875rem,  1.55rem + 1.60vw, 2.75rem);

  /* ---- movimento ----

     Três durações e três curvas, e nada além disso. Animação de interface tem
     um trabalho: explicar de onde a coisa veio e para onde foi. Quando cada
     componente inventa a própria duração, o produto parece nervoso.

     A curva padrão sai rápido e chega devagar (--saida), que é como o olho
     espera que algo desacelere. --entrada faz o contrário e serve para o que
     está sumindo. --suave é simétrica, para o que só muda de cor. */
  --curva: cubic-bezier(0.2, 0, 0, 1);
  --curva-entrada: cubic-bezier(0.4, 0, 1, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);

  --rapido: 120ms var(--curva-suave);
  --normal: 220ms var(--curva);
  --lento: 380ms var(--curva);

  /* ---- medidas do layout ----

     Larguras máximas de leitura. Texto atravessando um monitor de 27 polegadas
     é ilegível: o olho perde a linha na volta. Toda área de conteúdo escolhe
     uma destas e se centraliza. */
  --largura-estreita: 640px;   /* formulário, login, uma coluna de leitura */
  --largura-media: 1024px;     /* listas e cartões */
  --largura-larga: 1440px;     /* quadro kanban */

  --lateral-largura: clamp(228px, 18vw, 272px);
  --lateral-estreita: 68px;
  --barra-altura: 56px;
  --inferior-altura: 60px;

  /* Alvo mínimo de toque. 44px é o mínimo da Apple; num app usado em pé, na
     rua, às vezes de luva, encostar no mínimo é encostar no errado. */
  --toque: 48px;

  /* Onde a tela do celular realmente começa e termina. Em navegador dá zero;
     dentro do app nativo é o notch e a barra de gestos. */
  --topo-seguro: env(safe-area-inset-top, 0px);
  --baixo-seguro: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: var(--cinza-950);
    --superficie: var(--cinza-900);
    --superficie-2: var(--cinza-800);
    --superficie-3: var(--cinza-700);
    --borda: var(--cinza-800);
    --borda-forte: var(--cinza-700);

    --texto: var(--cinza-50);
    --texto-2: var(--cinza-400);
    --texto-3: var(--cinza-500);

    --marca: var(--marca-400);
    --marca-hover: var(--marca-300);
    --marca-suave: rgb(249 115 22 / 12%);
    --marca-texto: var(--cinza-950);

    /* No escuro a cor de sinalização precisa ser o tom claro: o escuro
       sumiria no fundo. */
    --ok: #4ade80;     --ok-suave: rgb(74 222 128 / 12%);
    --aviso: #fbbf24;  --aviso-suave: rgb(251 191 36 / 12%);
    --perigo: #f87171; --perigo-suave: rgb(248 113 113 / 12%);
    --info: #7ba7f7;   --info-suave: rgb(123 167 247 / 12%);

    --nav-fundo: #0a0e13;
    --nav-texto: var(--cinza-400);

    --sombra-1: 0 1px 3px rgb(0 0 0 / 40%);
    --sombra-2: 0 4px 8px rgb(0 0 0 / 45%);
    --sombra-3: 0 12px 24px rgb(0 0 0 / 55%);
  }
}

/* ============================================================================
   Reset e primitivas
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Impede o "puxa e balança" do iOS quando o app roda em tela cheia. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  /* Seleção de texto por toque longo atrapalha num app; o conteúdo que precisa
     ser copiado libera explicitamente com .selecionavel */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0; }
a { color: var(--marca); }

button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visível só no teclado: mouse e toque não precisam do anel. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.selecionavel { user-select: all; -webkit-user-select: all; }

/* ---- utilitários de layout ---- */

.pilha { display: flex; flex-direction: column; }
.pilha--1 { gap: var(--s-1); } .pilha--2 { gap: var(--s-2); }
.pilha--3 { gap: var(--s-3); } .pilha--4 { gap: var(--s-4); }
.pilha--5 { gap: var(--s-5); } .pilha--6 { gap: var(--s-6); }

.linha { display: flex; align-items: center; gap: var(--s-3); }
.linha--entre { justify-content: space-between; }
.linha--fim { justify-content: flex-end; }
.linha--quebra { flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }

/* Grade que se ajusta sozinha. Sem media query: o número de colunas vem do
   espaço disponível, então funciona igual no celular e no monitor. */
.grade { display: grid; gap: var(--s-4); }
.grade--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grade--campos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---- utilitários de texto ---- */

.t-xs { font-size: var(--t-xs); }  .t-sm { font-size: var(--t-sm); }
.t-lg { font-size: var(--t-lg); }  .t-xl { font-size: var(--t-xl); }
.fraco { color: var(--texto-2); }
.mais-fraco { color: var(--texto-3); }
.forte { font-weight: 600; }
.mono { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.numero { font-variant-numeric: tabular-nums; }

/* Corta com reticências. Precisa de min-width:0 no pai flex para funcionar. */
.corta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-so {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- responsividade ---- */

/* 900px é onde a barra lateral passa a caber sem espremer o conteúdo. */
@media (max-width: 899px) { .so-web { display: none !important; } }
@media (min-width: 900px) { .so-celular { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}