/**
 * R360 — tokens de design
 *
 * ACAO T5.17. Arquivo aditivo e ainda NAO APLICADO: definir os tokens nao muda
 * nenhuma tela. A aplicacao acontece na acao T5.19, modulo por modulo, e so
 * naqueles ja isolados pelo contrato de modulo — onde a mudanca visual nao tem
 * como vazar para a tela vizinha.
 *
 * Os valores nao foram inventados. Foram derivados da distribuicao real do
 * codigo atual: as cores dominantes ja formam uma paleta coerente (familia
 * slate mais um azul de marca), e o que existe hoje sao 1.803 variacoes porque
 * cada arquivo escolheu o proprio tom. Adotar estes tokens e convergir, nao
 * redesenhar — a maioria das telas muda pouco.
 *
 * A excecao deliberada e a tipografia. Ver a nota no fim do arquivo.
 */

:root {
  /* ---------------------------------------------------------- tipografia */
  /* Sete degraus no lugar dos 102 tamanhos atuais.
     O piso sobe de 8px para 12px: ver nota no fim. */
  --r360-text-xs:    12px;   /* rotulo, legenda, unidade                    */
  --r360-text-sm:    13px;   /* texto secundario, celula de tabela densa    */
  --r360-text-base:  15px;   /* corpo — o padrao de leitura                 */
  --r360-text-lg:    17px;   /* destaque, rotulo de campo importante        */
  --r360-text-xl:    20px;   /* titulo de secao                             */
  --r360-text-2xl:   25px;   /* titulo de tela                              */
  --r360-text-3xl:   32px;   /* numero grande, indicador                    */

  --r360-leading-tight:  1.25;  /* titulos            */
  --r360-leading-normal: 1.5;   /* corpo              */
  --r360-leading-loose:  1.65;  /* texto longo        */

  --r360-weight-regular: 400;
  --r360-weight-medium:  500;
  --r360-weight-semibold: 600;
  --r360-weight-bold:    700;

  --r360-font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r360-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --------------------------------------------------------------- cores */
  /* Superficies — familia slate, ja dominante no codigo */
  --r360-surface:        #ffffff;
  --r360-surface-raised: #f8fafc;
  --r360-surface-sunken: #f1f5f9;

  /* Bordas */
  --r360-border:        #e2e8f0;
  --r360-border-strong: #cbd5e1;

  /* Texto */
  --r360-text-strong:    #172033;
  --r360-text-default:   #334155;
  --r360-text-secondary: #64748b;
  --r360-text-muted:     #94a3b8;
  --r360-text-inverse:   #ffffff;

  /* Marca — #155eef e a cor mais usada do sistema hoje */
  --r360-primary:        #155eef;
  --r360-primary-hover:  #2563eb;
  --r360-primary-soft:   #dbeafe;
  --r360-primary-subtle: #eff6ff;

  /* Estado — semantica separada da cor de marca */
  --r360-success:        #16a34a;
  --r360-success-strong: #15803d;
  --r360-success-soft:   #dcfce7;

  --r360-warning:        #d97706;
  --r360-warning-strong: #b45309;
  --r360-warning-soft:   #fef3c7;

  --r360-danger:         #dc2626;
  --r360-danger-strong:  #b91c1c;
  --r360-danger-soft:    #fee2e2;

  --r360-info:           #7c3aed;
  --r360-info-soft:      #ede9fe;

  /* ---------------------------------------------------------- espacamento */
  /* Escala de 4px. Tudo que separa elementos usa um destes. */
  --r360-space-1:  4px;
  --r360-space-2:  8px;
  --r360-space-3: 12px;
  --r360-space-4: 16px;
  --r360-space-5: 24px;
  --r360-space-6: 32px;
  --r360-space-7: 48px;

  /* --------------------------------------------------------------- forma */
  --r360-radius-sm:   4px;
  --r360-radius-md:   8px;
  --r360-radius-lg:  12px;
  --r360-radius-full: 999px;

  --r360-shadow-sm: 0 1px 2px rgba(23, 32, 51, .06);
  --r360-shadow-md: 0 4px 12px rgba(23, 32, 51, .10);
  --r360-shadow-lg: 0 12px 32px rgba(23, 32, 51, .14);

  /* ------------------------------------------------------------ camadas */
  /* Seis camadas no lugar dos 68 valores atuais, cujo maior chegou a
     2147483600 — o teto do inteiro de 32 bits, porque cada correcao
     precisou ficar acima da anterior. */
  --r360-z-base:      0;
  --r360-z-conteudo:  10;
  --r360-z-sticky:   100;
  --r360-z-dropdown: 200;
  --r360-z-modal:    300;
  --r360-z-toast:    400;

  /* ------------------------------------------------------------ movimento */
  /* Duracoes curtas e funcionais. Ver docs/arquitetura/ — a especificacao
     completa de movimento e a acao T7.26. */
  --r360-motion-toque:     120ms;  /* retorno de toque             */
  --r360-motion-transicao: 180ms;  /* transicao de tela            */
  --r360-motion-painel:    240ms;  /* painel que entra             */
  --r360-motion-curva: cubic-bezier(.2, 0, 0, 1);

  /* --------------------------------------------------------------- alvo */
  /* Area minima de toque. O valor maior vale para coletor operado com
     luva, onde a precisao do toque cai. */
  --r360-alvo-min:      40px;
  --r360-alvo-coletor:  48px;
}

/* Quem pede menos movimento recebe menos movimento. Nao e opcional. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --r360-motion-toque: 0ms;
    --r360-motion-transicao: 0ms;
    --r360-motion-painel: 0ms;
  }
}

/**
 * NOTA SOBRE O PISO TIPOGRAFICO
 *
 * Os tamanhos mais usados hoje sao 10px (392 vezes), 11px (328) e 9px (295),
 * e existem declaracoes em 8px, 8.5px, 7.5px e 7px. Sao 2.306 declaracoes de
 * font-size em pixel espalhadas pelo CSS.
 *
 * Esta escala sobe o piso para 12px e coloca o corpo em 15px. E a mudanca
 * com maior impacto visual de todo o plano: a densidade das telas cai e o
 * conteudo reflui.
 *
 * O motivo e operacional, nao estetico. O R360 e usado em chao de fabrica e
 * em coletor, frequentemente a mais de um braco de distancia da tela e sob
 * iluminacao pior que a de um escritorio. Texto de 9px nessas condicoes nao
 * e lido — e adivinhado.
 *
 * Por isso a aplicacao e modulo a modulo (T5.19), e a validacao e com quem
 * opera, nao no monitor de quem desenvolve.
 */