/* /public/assets/brand.css
   Klas Küchen Branding – wird NACH den seitenspezifischen Stylesheets geladen.
   Quelle der Tokens: DESIGN.md im Website-Repo (kuechen-klas.de-2026).
   Regeln: Oak nur als Handlungsfarbe, Tinte/Papier als Fläche, pillenförmige Buttons. */

/* ── Schriften (selbst gehostet, OFL) ─────────────────────────── */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-regular-latin.woff2") format("woff2");
}

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --kk-ink: #1f2937;
  --kk-ink-secondary: #555555;
  --kk-paper: #fbfaf7;
  --kk-paper-secondary: #f5f1eb;
  --kk-oak: #8c6a4f;
  --kk-oak-deep: #76533d;
  --kk-walnut-light: #c49a7a;
  --kk-line: #e5e7eb;
  --kk-font: "Nunito Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kk-font-editorial: "Instrument Serif", Georgia, serif;
  --kk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kk-glow: 0 0 40px rgba(196, 154, 122, 0.35);

  /* admin.css + dashboard.css */
  --primary: var(--kk-oak);
  --primary-hover: var(--kk-oak-deep);
  --primary-light: rgba(140, 106, 79, 0.08);
  --primary-gradient: linear-gradient(135deg, var(--kk-oak), var(--kk-oak-deep));
  --bg: var(--kk-paper);
  --text: var(--kk-ink);
  --text-secondary: var(--kk-ink-secondary);
  --border-strong: var(--kk-line);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Legacy-Admin-Variablen (Fehlerseiten, Landing-Mode) */
  --admin-accent: var(--kk-oak);
  --admin-bg: var(--kk-paper);
  --admin-text: var(--kk-ink);
  --admin-muted: var(--kk-ink-secondary);
  --admin-panel: var(--kk-paper-secondary);
}

html, body {
  font-family: var(--kk-font);
}

body {
  background-color: var(--kk-paper);
  color: var(--kk-ink);
}

/* ── Buttons: Pille, Oak, leichtes Federn ─────────────────────── */
.btn-primary,
.btn-submit {
  border-radius: 9999px;
  background: var(--kk-oak);
  color: #fff;
  font-weight: 700;
  min-height: 48px;
  transition: background-color .2s ease, box-shadow .2s ease, transform .25s var(--kk-ease-spring);
}
.btn-primary:hover,
.btn-submit:hover {
  background: var(--kk-oak-deep);
  box-shadow: var(--kk-glow);
  transform: translateY(-2px);
}
.btn-primary:focus-visible,
.btn-submit:focus-visible {
  outline: 2px solid rgba(140, 106, 79, 0.6);
  outline-offset: 3px;
}
.btn-submit:disabled {
  background: #ccc;
  box-shadow: none;
  transform: none;
}

/* ── Öffentliche Empfehlungsseite (body.kk-landing) ───────────── */
.kk-landing .header {
  background: var(--kk-paper);
  color: var(--kk-ink);
  border-bottom: 1px solid var(--kk-line);
  padding: 20px;
}
.kk-landing .header .logo img { max-height: 72px; width: auto; }
.kk-landing .header .logo i { color: var(--kk-oak); }
.kk-landing .hero {
  background: var(--kk-ink);
  color: #fff;
}
.kk-landing .hero h1 {
  font-family: var(--kk-font-editorial);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.7vw, 3.75rem);
  line-height: 1.05;
}
.kk-landing .referrer-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.kk-landing .form-section {
  border-radius: 20px;
  border: 1px solid rgba(31, 41, 55, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.kk-landing .form-section h2,
.kk-landing .feature h3 { color: var(--kk-ink); }
.kk-landing .form-section p,
.kk-landing .feature p { color: var(--kk-ink-secondary); }
.kk-landing .form-group label { color: var(--kk-ink); }
.kk-landing .form-group input,
.kk-landing .form-group textarea {
  border: 1px solid var(--kk-line);
  border-radius: 14px;
  background: #fff;
}
.kk-landing .form-group input:focus,
.kk-landing .form-group textarea:focus {
  border-color: var(--kk-oak);
  box-shadow: 0 0 0 3px rgba(140, 106, 79, 0.15);
}
.kk-landing .form-group label .required,
.kk-landing .feature-icon { color: var(--kk-oak); }
.kk-landing .features { background: var(--kk-paper-secondary); border-radius: 20px; }