/**
 * KitZ Brand System v1.0.0 | 2026-05-27 | https://kitz.services/branding
 *
 * Drop-in CSS custom properties and utility classes for the
 * KitZ Japandi Terminal design system.
 *
 * Usage: <link rel="stylesheet" href="kitz-brand.css">
 */

/* ------------------------------------------------------------------ */
/* 1. CUSTOM PROPERTIES                                               */
/* ------------------------------------------------------------------ */

:root {
  /* Surfaces */
  --kz-bone: #F9F6EF;
  --kz-paper: #F2EEE4;
  --kz-paper-2: #ECE7DA;
  --kz-veil: #E5DECD;
  --kz-card: #FDFBF6;

  /* Ink */
  --kz-ink: #1A1A1A;
  --kz-ink-2: #3A3733;
  --kz-ink-3: #6E6A62;
  --kz-ink-4: #9A9489;

  /* Borders */
  --kz-rule: #D9D2BF;
  --kz-rule-2: #C7BFA8;

  /* Accents */
  --kz-gold: #A68B5B;
  --kz-gold-deep: #8C7244;
  --kz-gold-soft: #D9C9A6;
  --kz-moss: #7A8B6F;
  --kz-moss-deep: #5E6E54;
  --kz-moss-soft: #BFCBB1;

  /* Status */
  --kz-warn: #B8884B;
  --kz-error: #A14B3C;
  --kz-whatsapp: #25D366;

  /* Agent colors */
  --kz-luna: #6E7A8C;
  --kz-marco: #A68B5B;
  --kz-nova: #B16A4F;
  --kz-sage: #7A8B6F;
  --kz-flux: #8C7A6E;
  --kz-creativa: #6E5778;

  /* Font stacks */
  --kz-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --kz-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --kz-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --kz-logo: 'Playfair Display', 'Bodoni Moda', Didot, Bodoni, Georgia, serif;
}

/* ------------------------------------------------------------------ */
/* 2. TYPOGRAPHY UTILITIES                                            */
/* ------------------------------------------------------------------ */

.kz-h1 {
  font-family: var(--kz-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--kz-ink);
  margin: 0;
}

.kz-h2 {
  font-family: var(--kz-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--kz-ink);
  margin: 0;
}

.kz-h3 {
  font-family: var(--kz-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--kz-ink);
  margin: 0;
}

.kz-body {
  font-family: var(--kz-mono);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--kz-ink-2);
}

.kz-label {
  font-family: var(--kz-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--kz-ink-3);
}

.kz-caption {
  font-family: var(--kz-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--kz-ink-4);
}

.kz-legal {
  font-family: var(--kz-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--kz-ink-4);
}

/* ------------------------------------------------------------------ */
/* 3. BUTTON UTILITIES                                                */
/* ------------------------------------------------------------------ */

.kz-btn {
  display: inline-block;
  padding: 12px 22px;
  font-family: var(--kz-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: var(--kz-ink);
  color: var(--kz-card);
  transition: opacity 150ms;
}

.kz-btn:hover {
  opacity: 0.88;
}

.kz-btn--secondary {
  background: var(--kz-card);
  color: var(--kz-ink);
  border: 1px solid var(--kz-rule);
}

.kz-btn--secondary:hover {
  background: var(--kz-paper);
}

.kz-btn--ghost {
  background: transparent;
  color: var(--kz-gold);
}

.kz-btn--ghost:hover {
  color: var(--kz-gold-deep);
}

/* ------------------------------------------------------------------ */
/* 4. CARD UTILITIES                                                  */
/* ------------------------------------------------------------------ */

.kz-card {
  background: var(--kz-card);
  border: 1px solid var(--kz-rule);
  border-radius: 0;
  padding: 16px;
}

.kz-card--flat {
  background: var(--kz-paper);
  border: none;
  border-radius: 0;
  padding: 16px;
}

.kz-card--hover {
  background: var(--kz-paper-2);
  border: 1px solid var(--kz-rule-2);
  border-radius: 0;
  padding: 16px;
}