/* ==========================================================================
   Kallnoguer OS — Design tokens
   Fonte única da identidade visual do sistema. Espelha os tokens do site
   (site/app/globals.css): mesmas cores, neutros frios, raios, sombras e fonte.
   Ao alterar uma cor da marca, altere nos DOIS arquivos.

   Camadas:
     1. --kn-*  tokens oficiais (use estes em código novo)
     2. apelidos legados (--primary, --gray-500, --navy…) para não quebrar
        templates antigos; migrar aos poucos para --kn-*.
   ========================================================================== */

/* A fonte (Hanken Grotesk) é declarada em /static/fonts/fonts.css. */

:root {
  /* ---- Marca (idêntico ao site) ---- */
  --kn-primary: #29547e;
  --kn-primary-deep: #1b3a5a;
  --kn-primary-darker: #132c44;
  --kn-primary-hover: #33689c;
  --kn-on-primary: #ffffff;
  --kn-on-primary-mut: #b7c9da;
  --kn-accent: #1e73be;
  --kn-accent-strong: #175e9e;
  --kn-sky: #8cc7ee;
  --kn-sky-strong: #5faee3;
  --kn-sky-soft: #e6f1fa;
  --kn-whatsapp: #25d366;

  /* ---- Neutros frios (nunca cinza/preto puro) ---- */
  --kn-bg: #ffffff;
  --kn-surface: #f3f7fb;
  --kn-surface-2: #e7eef5;
  --kn-line: #d9e2ea;
  --kn-ink: #0a1420;
  --kn-muted: #55636f;
  --kn-n50: #f8fafc;
  --kn-n100: #f3f7fb;
  --kn-n200: #e7eef5;
  --kn-n300: #d9e2ea;
  --kn-n400: #a9b7c4;
  --kn-n500: #6b7a88;
  --kn-n600: #55636f;
  --kn-n700: #3d4a56;
  --kn-n800: #25313d;
  --kn-n900: #0a1420;

  /* ---- Status (definidos uma vez; texto sobre o fundo claro passa AA) ---- */
  --kn-success: #1a8452;
  --kn-success-bg: #e3f3ea;
  --kn-warning: #b8660b;
  --kn-warning-bg: #fcf0dc;
  --kn-danger: #c2362f;
  --kn-danger-bg: #fbe8e6;
  --kn-info: #1e73be;
  --kn-info-bg: #e6f1fa;

  /* ---- Etapas da OS (badges, kanban). Distintas entre si, mesma saturação. ---- */
  --kn-os-aberta: #175e9e;     --kn-os-aberta-bg: #e6f1fa;
  --kn-os-analise: #946200;    --kn-os-analise-bg: #fbf1d6;
  --kn-os-cliente: #b1470f;    --kn-os-cliente-bg: #fce9dd;
  --kn-os-peca: #5a4aa8;       --kn-os-peca-bg: #eeebfa;
  --kn-os-execucao: #0f6e80;   --kn-os-execucao-bg: #e1f3f6;

  /* ---- Tipografia ---- */
  --kn-font: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Forma ---- */
  --kn-radius-sm: 6px;
  --kn-radius: 10px;
  --kn-radius-lg: 14px;
  --kn-shadow-sm: 0 1px 2px rgba(10, 20, 32, 0.06);
  --kn-shadow: 0 6px 24px rgba(10, 20, 32, 0.08);
  --kn-shadow-card: 0 8px 26px rgba(10, 20, 32, 0.06);
  --kn-shadow-lg: 0 18px 50px rgba(10, 20, 32, 0.12);
  --kn-shadow-cta: 0 4px 14px rgba(41, 84, 126, 0.3);
  --kn-focus: 0 0 0 3px rgba(30, 115, 190, 0.18);

  /* ---- Movimento ---- */
  --kn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kn-dur-fast: 0.16s;
  --kn-dur: 0.28s;

  /* ======================================================================
     Apelidos legados — mantêm os templates antigos funcionando.
     ====================================================================== */
  /* painel interno (style.css) */
  --primary: var(--kn-primary);
  --primary-dark: var(--kn-primary-deep);
  --primary-color: var(--kn-primary);
  --secondary: var(--kn-accent);
  --accent: var(--kn-sky-strong);
  --background: var(--kn-surface);
  --text: var(--kn-ink);
  --text-color: var(--kn-ink);
  --text-muted: var(--kn-muted);
  --border-color: var(--kn-line);
  --white: #ffffff;
  --gray-50: var(--kn-n50);
  --gray-100: var(--kn-n100);
  --gray-200: var(--kn-n200);
  --gray-300: var(--kn-n300);
  --gray-400: var(--kn-n400);
  --gray-500: var(--kn-n500);
  --gray-600: var(--kn-n600);
  --gray-700: var(--kn-n700);
  --gray-800: var(--kn-n800);
  --gray-900: var(--kn-n900);
  --success: var(--kn-success);
  --warning: var(--kn-warning);
  --danger: var(--kn-danger);
  --info: var(--kn-info);
  --success-color: var(--kn-success);
  --warning-color: var(--kn-warning);
  --danger-color: var(--kn-danger);
  --shadow-sm: var(--kn-shadow-sm);
  --shadow-md: var(--kn-shadow);
  --shadow: var(--kn-shadow);
  --shadow-lg: var(--kn-shadow-lg);
  --radius-sm: var(--kn-radius-sm);
  --radius: var(--kn-radius);
  --radius-md: var(--kn-radius);
  --radius-lg: var(--kn-radius-lg);

  /* landing, login, cadastro e portal */
  --navy: var(--kn-primary);
  --navy-deep: var(--kn-primary-deep);
  --navy-darker: var(--kn-primary-darker);
  --blue: var(--kn-accent);
  --blue-light: var(--kn-sky-strong);
  --sky: var(--kn-sky-soft);
  --sky-2: var(--kn-surface-2);
  --ink: var(--kn-ink);
  --line: var(--kn-line);
  --slate-400: var(--kn-n500);
  --slate-500: var(--kn-muted);
  --slate-700: var(--kn-n700);
  --maxw: 1180px;
}

/* ============ Marca: logotipo oficial + "OS" ============ */
.kn-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  text-decoration: none;
  line-height: 1;
  font-size: 40px; /* altura do logotipo; ajuste com --kn-brand-h */
  font-size: var(--kn-brand-h, 40px);
}
.kn-brand img { height: 1em; width: auto; display: block; }
.kn-brand .kn-brand-os {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-left: 0.42em;
  margin-block: 0.12em;
  border-left: 1.5px solid var(--kn-line);
  font-family: var(--kn-font);
  font-weight: 700;
  font-size: 0.46em;
  letter-spacing: 0.01em;
  color: var(--kn-primary);
}
.kn-brand--dark .kn-brand-os { color: #fff; border-left-color: rgba(255, 255, 255, 0.28); }

/* Controles de formulário herdam a fonte da marca (o navegador usa Arial/monospace por padrão). */
button, input, select, textarea, optgroup { font-family: inherit; }