/* ConfTech · tokens de design
   Valores em canais "R G B" para permitir rgb(var(--x) / .12).
   O tema escuro tem valores PRÓPRIOS (escolhidos um a um), não derivados do claro.
   Validar contraste com: python scripts/qa/contraste.py */

@font-face {
  font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Code"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/fira-code-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Code"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/fira-code-latin-500-normal.woff2") format("woff2");
}

:root {
  /* Tipografia */
  --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Espaço (escala de 4 px) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;

  /* Forma */
  --r-sm: 4px;     /* selos */
  --r-md: 6px;     /* controles */
  --r-lg: 8px;     /* superfícies */
  --touch: 2.75rem;      /* 44 px: alvo mínimo no celular */
  --control-h: 2.5rem;   /* 40 px: desktop */
  --page-w: 76rem;
  --sidebar-w: 15.5rem;
  --topbar-h: 3.5rem;

  /* Movimento */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --t-fast: 100ms;
  --t-base: 160ms;

  /* Escala de z-index nomeada */
  --z-sticky: 20; --z-header: 30; --z-backdrop: 40; --z-drawer: 50;
  --z-popover: 60; --z-modal: 70; --z-toast: 80;

  /* Marca (oliva) e acento (couro) */
  --brand-50: 241 243 230;
  --brand-100: 228 233 207;
  --brand-600: 74 90 35;
  --brand-700: 61 74 28;
  --brand-950: 29 36 16;
  --accent-600: 183 121 31;

  /* Neutros quentes */
  --bg: 247 246 242;
  --surface: 255 255 255;
  --surface-2: 243 242 237;      /* cabeçalho de tabela, áreas rebaixadas */
  --field: 255 255 255;
  --border: 226 224 216;
  --border-strong: 200 197 185;
  --field-border: 134 130 116;   /* borda de campo: 3:1 sobre o fundo */
  --text: 31 30 26;
  --text-2: 85 82 72;
  --text-3: 107 104 94;

  /* Papéis semânticos */
  --primary: var(--brand-600);
  --primary-hover: var(--brand-700);
  --on-primary: 255 255 255;
  --logo-plate: 255 255 255;  /* fundo claro sob o logo do cliente, para qualquer arte aparecer no menu escuro */
  --primary-soft: var(--brand-50);
  --primary-ink: 55 68 23;       /* texto sobre fundo suave da marca */
  --link: 61 74 28;

  --ok: 40 110 70;      --ok-soft: 231 243 235;     --ok-ink: 28 84 52;
  --warn: 150 84 6;     --warn-soft: 252 242 224;   --warn-ink: 120 66 4;
  --danger: 176 50 42;  --danger-soft: 251 234 232; --danger-ink: 140 38 32;
  --info: 38 100 168;   --info-soft: 230 239 250;   --info-ink: 28 78 134;

  /* Menu lateral */
  --nav-bg: 29 36 16;
  --nav-text: 203 208 188;
  --nav-text-strong: 255 255 255;
  --nav-muted: 140 148 120;
  --nav-hover: 255 255 255 / .06;
  --nav-active-bg: 255 255 255 / .10;
  --nav-accent: 222 166 80;
  --nav-border: 255 255 255 / .09;

  --shadow-float: 0 8px 24px rgb(31 30 26 / .14), 0 2px 6px rgb(31 30 26 / .08);
  --focus: 61 74 28;
  --overlay: 20 22 12 / .5;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: 20 22 15;
  --surface: 28 31 22;
  --surface-2: 35 39 28;
  --field: 22 25 17;
  --border: 51 56 42;
  --border-strong: 76 83 62;
  --field-border: 118 126 98;
  --text: 236 235 227;
  --text-2: 190 189 175;
  --text-3: 156 155 140;

  --primary: 138 164 71;         /* botão sólido: texto escuro por cima */
  --primary-hover: 156 182 88;
  --on-primary: 22 28 8;
  --primary-soft: 41 49 24;
  --primary-ink: 205 222 160;
  --link: 168 192 104;

  --ok: 96 190 138;     --ok-soft: 28 52 40;        --ok-ink: 156 224 186;
  --warn: 226 168 78;   --warn-soft: 58 44 22;      --warn-ink: 240 200 130;
  --danger: 240 128 118; --danger-soft: 66 32 30;   --danger-ink: 248 170 162;
  --info: 120 175 235;  --info-soft: 28 44 66;      --info-ink: 170 207 245;

  --nav-bg: 14 16 10;
  --nav-text: 190 195 175;
  --nav-text-strong: 245 246 238;
  --nav-muted: 128 135 108;
  --nav-hover: 255 255 255 / .05;
  --nav-active-bg: 255 255 255 / .09;
  --nav-accent: 226 172 88;
  --nav-border: 255 255 255 / .08;

  --shadow-float: 0 10px 28px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .4);
  --focus: 168 192 104;
  --overlay: 0 0 0 / .62;

  color-scheme: dark;
}

/* Sem escolha explícita, segue o sistema operacional */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: 20 22 15; --surface: 28 31 22; --surface-2: 35 39 28; --field: 22 25 17;
    --border: 51 56 42; --border-strong: 76 83 62; --field-border: 118 126 98;
    --text: 236 235 227; --text-2: 190 189 175; --text-3: 156 155 140;
    --primary: 138 164 71; --primary-hover: 156 182 88; --on-primary: 22 28 8;
    --primary-soft: 41 49 24; --primary-ink: 205 222 160; --link: 168 192 104;
    --ok: 96 190 138; --ok-soft: 28 52 40; --ok-ink: 156 224 186;
    --warn: 226 168 78; --warn-soft: 58 44 22; --warn-ink: 240 200 130;
    --danger: 240 128 118; --danger-soft: 66 32 30; --danger-ink: 248 170 162;
    --info: 120 175 235; --info-soft: 28 44 66; --info-ink: 170 207 245;
    --nav-bg: 14 16 10; --nav-text: 190 195 175; --nav-text-strong: 245 246 238; --nav-muted: 128 135 108;
    --nav-hover: 255 255 255 / .05; --nav-active-bg: 255 255 255 / .09;
    --nav-accent: 226 172 88; --nav-border: 255 255 255 / .08;
    --shadow-float: 0 10px 28px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .4);
    --focus: 168 192 104; --overlay: 0 0 0 / .62;
    color-scheme: dark;
  }
}