/*
 * Hautomatize design tokens.
 *
 * Every screen reads colour, type, radius and spacing from here. Modules must
 * not define their own greens or greys: use var(--hz-*) so light/dark mode and
 * the tenant's brand (core/branding.py -> --brand-primaria) apply everywhere.
 *
 * Dark mode is toggled by the platform (body.dark-mode + html[data-theme]).
 */
:root {
  /* Brand ------------------------------------------------------------- */
  --hz-brand: var(--brand-primaria, #0e7a43);
  --hz-brand-hover: var(--brand-primaria-hover, #0a6537);
  --hz-brand-ink: var(--brand-primaria-texto, #ffffff);
  --hz-brand-soft: #e3f4ea;
  --hz-brand-line: #b7e2c8;
  --hz-brand-text: #0b6a3a;
  --hz-accent: var(--brand-acento, #1e5aa8);
  --hz-logo-gradient: linear-gradient(135deg, #beff00 0%, #00d2ff 100%);

  /* Neutrals (green-biased greys) ------------------------------------- */
  --hz-bg: #f3f6f4;
  --hz-surface: #ffffff;
  --hz-surface-2: #f7f9f8;
  --hz-surface-3: #eef2f0;
  --hz-line: #e1e7e3;
  --hz-line-strong: #cbd5cf;
  --hz-ink: #10201a;
  --hz-ink-2: #3e4f47;
  --hz-muted: #6a7b73;
  --hz-overlay: rgba(9, 20, 15, .45);

  /* Navigation shell -------------------------------------------------- */
  --hz-rail-bg: #0d1f18;
  --hz-rail-ink: #a9c2b6;
  --hz-rail-hover: #16302a;
  --hz-rail-active: #1d3a2e;
  --hz-rail-marker: #6ee7a8;
  --hz-rail-width: 64px;
  --hz-panel-width: 240px;
  --hz-topbar-height: 56px;

  /* Semantic states (not brand) --------------------------------------- */
  --hz-ok: #0e7a43;       --hz-ok-bg: #e3f4ea;
  --hz-warn: #9a5b00;     --hz-warn-bg: #fff1d6;
  --hz-info: #1e5aa8;     --hz-info-bg: #e4eefb;
  --hz-violet: #6b46c1;   --hz-violet-bg: #efe9fb;
  --hz-danger: #b42318;   --hz-danger-bg: #fde7e4;
  --hz-idle: #56645d;     --hz-idle-bg: #ecefed;

  /* Type --------------------------------------------------------------- */
  --hz-font: var(--brand-fonte, "Manrope"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hz-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hz-text-xs: .75rem;
  --hz-text-sm: .8125rem;
  --hz-text-md: .875rem;
  --hz-text-lg: 1rem;
  --hz-text-xl: 1.25rem;
  --hz-text-2xl: 1.5rem;
  --hz-text-3xl: 1.875rem;

  /* Shape & depth ------------------------------------------------------ */
  --hz-radius-sm: 6px;
  --hz-radius: var(--brand-raio, 10px);
  --hz-radius-lg: 14px;
  --hz-radius-pill: 999px;
  --hz-shadow-sm: 0 1px 2px rgba(16, 32, 26, .06);
  --hz-shadow: 0 1px 2px rgba(16, 32, 26, .06), 0 8px 24px -12px rgba(16, 32, 26, .18);
  --hz-shadow-lg: 0 24px 48px -16px rgba(16, 32, 26, .28);
  --hz-focus: 0 0 0 3px color-mix(in srgb, var(--hz-brand) 28%, transparent);

  /* Spacing (4px grid) --------------------------------------------------- */
  --hz-space-1: 4px;  --hz-space-2: 8px;  --hz-space-3: 12px; --hz-space-4: 16px;
  --hz-space-5: 20px; --hz-space-6: 24px; --hz-space-8: 32px; --hz-space-10: 40px;
  --hz-density: var(--brand-densidade, 1);
  --hz-page-pad: calc(24px * var(--hz-density));

  --hz-ease: cubic-bezier(.2, .7, .2, 1);

  /* Legacy aliases: older module CSS reads these names. Pointing them at the
     tokens keeps every screen on the same palette while modules migrate. */
  --verde-deep: var(--hz-brand);
  --verde-suave: var(--hz-brand-soft);
  --primary-500: var(--hz-brand);
  --primary-600: var(--hz-brand-hover);
  --text-color: var(--hz-ink);
  --muted: var(--hz-muted);
  --muted-strong: var(--hz-ink-2);
  --surface-1: var(--hz-surface);
  --surface-2: var(--hz-surface-2);
  --surface-3: var(--hz-surface-3);
  --radius-lg: var(--hz-radius-lg);
  --radius-md: var(--hz-radius);
  --radius-sm: var(--hz-radius-sm);
  --shadow-soft: var(--hz-shadow);
  --sombra-suave: var(--hz-shadow-sm);
  --sombra-media: var(--hz-shadow);
  --gradiente-principal: var(--hz-bg);
  --gradiente-card: var(--hz-surface);
  --pd-green: var(--hz-brand);
  --bf-green: var(--hz-brand);
  --bfl-green: var(--hz-brand);
}

html[data-theme="dark"],
html[data-bs-theme="dark"],
body.dark-mode {
  color-scheme: dark;
  --hz-brand: var(--brand-primaria, #3ccb7f);
  --hz-brand-hover: #56d892;
  --hz-brand-ink: #06140d;
  --hz-brand-soft: #15342a;
  --hz-brand-line: #23523f;
  --hz-brand-text: #6fe0a4;
  --hz-accent: var(--brand-acento, #7fb0f0);

  --hz-bg: #0b1411;
  --hz-surface: #111d18;
  --hz-surface-2: #15241e;
  --hz-surface-3: #1b2c25;
  --hz-line: #223630;
  --hz-line-strong: #2e4740;
  --hz-ink: #e6f0eb;
  --hz-ink-2: #b9ccc3;
  --hz-muted: #8aa197;
  --hz-overlay: rgba(0, 0, 0, .6);

  --hz-rail-bg: #070e0b;
  --hz-rail-ink: #7f998d;
  --hz-rail-hover: #11231c;
  --hz-rail-active: #16302a;

  --hz-ok: #3ccb7f;     --hz-ok-bg: #15342a;
  --hz-warn: #f2b650;   --hz-warn-bg: #35270e;
  --hz-info: #7fb0f0;   --hz-info-bg: #15263b;
  --hz-violet: #b79cf5; --hz-violet-bg: #261e3c;
  --hz-danger: #f2877b; --hz-danger-bg: #3a1a17;
  --hz-idle: #a3b3ab;   --hz-idle-bg: #1c2a25;

  --hz-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --hz-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --hz-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
}