/*
 * Tokens do projeto: a ÚNICA fonte de cores, medidas e tipografia das telas.
 *
 * Camadas do design system:
 *   atlassian.css  → tokens oficiais do Atlassian (--ds-*), gerados; não se usam nas telas
 *   semanticos.css → ESTE arquivo: o que cada cor/medida significa no sistema
 *   componentes/   → botão, campo, tabela… usam só os tokens deste arquivo
 *
 * Para mudar o visual do sistema inteiro, mude aqui. As cores escolhidas pela empresa
 * (Configurações → Aparência) sobrescrevem os tokens de marca (--cor-primaria…).
 */

:root {
  /* ---- Superfícies ---- */
  --cor-fundo: var(--ds-surface-sunken);              /* fundo da página */
  --cor-superficie: var(--ds-surface);                /* cartões */
  --cor-superficie-hover: var(--ds-surface-hovered);
  --cor-superficie-elevada: var(--ds-surface-raised); /* cartões que se destacam */
  --cor-sobreposicao: var(--ds-surface-overlay);      /* menus, janelas, avisos flutuantes */
  --cor-bloco: var(--ds-background-neutral);          /* blocos dentro dos cartões */
  --cor-bloco-hover: var(--ds-background-neutral-hovered);
  --cor-cortina: var(--ds-blanket);                   /* atrás das janelas */

  /* ---- Texto ---- */
  --cor-texto: var(--ds-text);
  --cor-texto-suave: var(--ds-text-subtle);
  --cor-texto-sutil: var(--ds-text-subtlest);
  --cor-texto-desabilitado: var(--ds-text-disabled);
  --cor-texto-inverso: var(--ds-text-inverse);
  --cor-link: var(--cor-primaria-texto);             /* segue a cor da marca */
  --cor-link-pressionado: var(--cor-primaria-pressionada);

  /* ---- Bordas ---- */
  --cor-borda: var(--ds-border);
  --cor-borda-forte: var(--ds-border-bold);
  --cor-borda-campo: var(--ds-border-input);
  --cor-foco: var(--ds-border-focused);

  /* ---- Marca (Configurações → Aparência troca; o sistema calcula as variações) ---- */
  --cor-primaria: var(--ds-background-brand-bold);
  --cor-primaria-hover: var(--ds-background-brand-bold-hovered);
  --cor-primaria-pressionada: var(--ds-background-brand-bold-pressed);
  --cor-primaria-suave: var(--ds-background-brand-subtlest);
  --cor-primaria-texto: var(--ds-text-brand);         /* texto na cor da marca */
  --cor-sobre-primaria: var(--ds-text-inverse);       /* texto em cima da cor primária */
  --cor-secundaria: var(--ds-background-discovery-bold);
  --cor-secundaria-hover: var(--ds-background-discovery-bold-hovered);
  --cor-secundaria-pressionada: var(--ds-background-discovery-bold-pressed);
  --cor-secundaria-suave: var(--ds-background-discovery);
  --cor-secundaria-texto: var(--ds-text-discovery);
  --cor-sobre-secundaria: var(--ds-text-inverse);
  --cor-terciaria: var(--ds-background-accent-teal-bolder);
  --cor-terciaria-hover: var(--ds-background-accent-teal-bolder-hovered);
  --cor-terciaria-pressionada: var(--ds-background-accent-teal-bolder-pressed);
  --cor-terciaria-suave: var(--ds-background-accent-teal-subtlest);
  --cor-terciaria-texto: var(--ds-text-accent-teal);
  --cor-sobre-terciaria: var(--ds-text-inverse);

  /* ---- Sistema (fixa): avisos flutuantes, confirmações e mensagens do SaaS ---- */
  --cor-sistema: var(--ds-background-brand-bold);
  --cor-sistema-hover: var(--ds-background-brand-bold-hovered);

  /* ---- Estados (fixos: o usuário precisa reconhecer um erro em qualquer marca) ---- */
  --cor-perigo: var(--ds-background-danger-bold);
  --cor-perigo-hover: var(--ds-background-danger-bold-hovered);
  --cor-perigo-fundo: var(--ds-background-danger);
  --cor-perigo-texto: var(--ds-text-danger);
  --cor-perigo-borda: var(--ds-border-danger);
  --cor-aviso: var(--ds-background-warning-bold);
  --cor-aviso-hover: var(--ds-background-warning-bold-hovered);
  --cor-aviso-fundo: var(--ds-background-warning);
  --cor-aviso-texto: var(--ds-text-warning);
  --cor-aviso-borda: var(--ds-border-warning);
  --cor-sobre-aviso: var(--ds-text-warning-inverse);
  --cor-sucesso: var(--ds-background-success-bold);
  --cor-sucesso-hover: var(--ds-background-success-bold-hovered);
  --cor-sucesso-fundo: var(--ds-background-success);
  --cor-sucesso-texto: var(--ds-text-success);
  --cor-sucesso-borda: var(--ds-border-success);
  --cor-info: var(--ds-background-information-bold);
  --cor-info-fundo: var(--ds-background-information);
  --cor-info-texto: var(--ds-text-information);
  --cor-info-borda: var(--ds-border-information);
  --cor-novo: var(--ds-background-discovery-bold);   /* novidades do sistema */
  --cor-novo-fundo: var(--ds-background-discovery);
  --cor-novo-texto: var(--ds-text-discovery);
  --cor-neutro-fundo: var(--ds-background-neutral);
  --cor-neutro-texto: var(--ds-text-subtle);
  --cor-selecionado-fundo: var(--cor-primaria-suave);  /* item atual, aba, opção escolhida */
  --cor-selecionado-texto: var(--cor-primaria-texto);
  --cor-desabilitado-fundo: var(--ds-background-disabled);

  /* Situações do gráfico de atividades (validadas para daltonismo; sempre com ícone e nome) */
  --cor-estado-atrasada: #d03b3b;
  --cor-estado-em-andamento: #2a78d6;
  --cor-estado-feita: #0ca30c;
  --cor-estado-a-fazer: #a8a29e;

  /* Papel na tela: prévias de documentos e desenhos são sempre claras, como impressas */
  --cor-papel: #ffffff;
  --cor-texto-no-papel: #1c1917;
  --cor-erro-no-papel: #ae2e24;
  --cor-mesa: #d6d3d1;          /* em volta da folha na prévia */
  --cor-marcador-edicao: #d97706;

  /* ---- Espaçamento (grade de 8 px do Atlassian) ---- */
  --espaco-025: var(--ds-space-025);  /* 2 px */
  --espaco-050: var(--ds-space-050);  /* 4 px */
  --espaco-075: var(--ds-space-075);  /* 6 px */
  --espaco-100: var(--ds-space-100);  /* 8 px */
  --espaco-150: var(--ds-space-150);  /* 12 px */
  --espaco-200: var(--ds-space-200);  /* 16 px */
  --espaco-250: var(--ds-space-250);  /* 20 px */
  --espaco-300: var(--ds-space-300);  /* 24 px */
  --espaco-400: var(--ds-space-400);  /* 32 px */
  --espaco-500: var(--ds-space-500);  /* 40 px */
  --espaco-600: var(--ds-space-600);  /* 48 px */
  --espaco-800: var(--ds-space-800);  /* 64 px */

  /* ---- Forma ---- */
  --raio-pequeno: var(--ds-radius-small);    /* 4 px: etiquetas, campos */
  --raio-medio: var(--ds-radius-medium);     /* 6 px: botões */
  --raio-grande: var(--ds-radius-large);     /* 8 px: cartões */
  --raio-maior: var(--ds-radius-xlarge);     /* 12 px: janelas */
  --raio-total: var(--ds-radius-full);       /* pílulas, círculos */
  --borda-largura: var(--ds-border-width);
  --borda-largura-foco: var(--ds-border-width-focused);

  /* ---- Elevação ---- */
  --sombra-elevada: var(--ds-shadow-raised);
  --sombra-sobreposta: var(--ds-shadow-overlay);

  /* ---- Tipografia ---- */
  --familia-texto: var(--ds-font-family-body);
  --familia-titulo: var(--ds-font-family-heading);
  --familia-codigo: var(--ds-font-family-code);
  --fonte-titulo-gg: var(--ds-font-heading-xlarge);   /* 28 px */
  --fonte-titulo-g: var(--ds-font-heading-large);     /* 24 px: h1 */
  --fonte-titulo-m: var(--ds-font-heading-medium);    /* 20 px: h2 */
  --fonte-titulo-p: var(--ds-font-heading-small);     /* 16 px: h3 */
  --fonte-titulo-pp: var(--ds-font-heading-xsmall);   /* 14 px */
  --fonte-texto-g: var(--ds-font-body-large);         /* 16 px */
  --fonte-texto: var(--ds-font-body);                 /* 14 px: padrão */
  --fonte-texto-p: var(--ds-font-body-small);         /* 12 px */
  --fonte-numero-g: var(--ds-font-metric-large);      /* indicadores */
  --peso-regular: var(--ds-font-weight-regular);
  --peso-medio: var(--ds-font-weight-medium);
  --peso-seminegrito: var(--ds-font-weight-semibold);
  --peso-negrito: var(--ds-font-weight-bold);

  /* ---- Ícones (Lucide) ---- */
  --tamanho-icone-p: 1rem;      /* 16 px: dentro de texto e botões compactos */
  --tamanho-icone-m: 1.25rem;   /* 20 px: padrão */
  --tamanho-icone-g: 1.5rem;    /* 24 px: destaque */

  /* ---- Medidas de layout ---- */
  --altura-controle: 2rem;        /* botões e campos (32 px, como no Atlassian) */
  --altura-controle-p: 1.5rem;    /* botões compactos */
  --largura-conteudo: 1100px;
  --largura-conteudo-larga: 1700px;
  --camada-menu: 60;
  --camada-avisos: 50;
}

/* No tema escuro, as situações do gráfico ficam mais claras para manter o contraste. */
:root[data-tema="escuro"] {
  --cor-estado-atrasada: #e66767;
  --cor-estado-em-andamento: #3987e5;
  --cor-estado-a-fazer: #78716c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-estado-atrasada: #e66767;
    --cor-estado-em-andamento: #3987e5;
    --cor-estado-a-fazer: #78716c;
  }
}