/* ============================================================
   theme-klarhimmel.css — Klarhimmel brand identity
   Applied OVER the neutral tokens/theme base.
   DNA: Stark black/white, characterful display typeface,
   confident typography, mono eyebrow labels, hairline rules,
   tier badges as signature element.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* KLARHIMMEL COLOR PALETTE — Black/white core + mono accents */
  --klh-black:        #000000;
  --klh-white:        #ffffff;
  --klh-gray-950:     #0a0a0a;
  --klh-gray-900:     #1a1a1a;
  --klh-gray-800:     #2d2d2d;
  --klh-gray-700:     #404040;
  --klh-gray-600:     #525252;
  --klh-gray-500:     #737373;
  --klh-gray-400:     #a3a3a3;
  --klh-gray-300:     #d4d4d4;
  --klh-gray-200:     #e5e5e5;
  --klh-gray-100:     #f5f5f5;

  /* MONO ACCENT — Punctuation and signature details */
  --klh-accent-mono:  #2d2d2d;  /* Darker gray for subtle contrast */
  --klh-hairline:     1px solid var(--klh-gray-300);
  --klh-hairline-light: 1px solid var(--klh-gray-200);

  /* TYPOGRAPHY — Playfair Display for headlines, Inter for body */
  --klh-font-display: 'Playfair Display', Georgia, serif;
  --klh-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --klh-font-mono:    'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

  /* TEXT COLOR ROLES */
  --klh-text-primary:   var(--klh-gray-900);
  --klh-text-secondary: var(--klh-gray-600);
  --klh-text-tertiary:  var(--klh-gray-500);
  --klh-text-inverse:   var(--klh-white);

  /* BACKGROUND ROLES */
  --klh-bg-primary:     var(--klh-white);
  --klh-bg-secondary:   var(--klh-gray-100);
  --klh-bg-tertiary:    var(--klh-gray-100);
  --klh-bg-dark:        var(--klh-gray-900);

  /* OVERRIDE NEUTRAL THEME TOKENS FOR KLARHIMMEL */
  --color-black:        var(--klh-black);
  --color-white:        var(--klh-white);
  --font-family-sans:   var(--klh-font-body);
  --font-family-mono:   var(--klh-font-mono);
  --text-primary:       var(--klh-text-primary);
  --text-secondary:     var(--klh-text-secondary);
  --text-tertiary:      var(--klh-text-tertiary);
  --text-inverse:       var(--klh-text-inverse);
  --bg-primary:         var(--klh-bg-primary);
  --bg-secondary:       var(--klh-bg-secondary);
  --bg-tertiary:        var(--klh-bg-tertiary);

  /* KLARHIMMEL TYPE SCALE — Overlays neutral tokens */
  /* Display: Playfair, confident, for hero/section openings */
  --klh-type-display:    clamp(3rem, 8vw, 5rem);
  --klh-type-display-lh: 1.05;

  /* H1: Playfair, strong */
  --klh-type-h1:         clamp(2.25rem, 5vw, 3.5rem);
  --klh-type-h1-lh:      1.1;

  /* H2: Playfair, section headers */
  --klh-type-h2:         clamp(1.75rem, 3.5vw, 2.5rem);
  --klh-type-h2-lh:      1.15;

  /* H3: Inter, subsection (smaller, clean) */
  --klh-type-h3:         1.25rem;
  --klh-type-h3-lh:      1.3;

  /* EYEBROW LABEL — Mono, uppercase, spaced, signature element */
  --klh-type-eyebrow:    0.75rem;
  --klh-eyebrow-weight:  600;
  --klh-eyebrow-letter:  0.08em;
  --klh-eyebrow-color:   var(--klh-gray-600);

  /* Body */
  --klh-type-body:       1rem;
  --klh-type-body-lh:    1.6;

  /* Lede (opening paragraph) */
  --klh-type-lede:       1.125rem;
  --klh-type-lede-lh:    1.55;

  /* Small text */
  --klh-type-small:      0.875rem;
  --klh-type-small-lh:   1.5;

  /* SPACING & LAYOUT — Generous margins, confident rhythm */
  --klh-space-tight:  var(--space-4);
  --klh-space-std:    var(--space-6);
  --klh-space-gen:    var(--space-12);
  --klh-space-hero:   var(--space-20);

  /* BORDERS & RULES */
  --klh-border-width:   1px;
  --klh-border-strong:  var(--klh-hairline);
  --klh-border-subtle:  var(--klh-hairline-light);

  /* RADIUS — Minimal, professional */
  --klh-radius-sm:      4px;
  --klh-radius-md:      8px;

  /* TIER BADGE COLORS — Signature element */
  --klh-tier-premium:   var(--klh-black);
  --klh-tier-standard:  var(--klh-gray-700);
  --klh-tier-entry:     var(--klh-gray-500);
}

/* ============================================================
   BASE TYPOGRAPHY — Klarhimmel style
   ============================================================ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--klh-font-body);
  color: var(--klh-text-primary);
  background-color: var(--klh-bg-primary);
  line-height: var(--klh-type-body-lh);
  font-size: var(--klh-type-body);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* DISPLAY HEADINGS — Playfair, authoritative */
.display, .type-display {
  font-family: var(--klh-font-display);
  font-size: var(--klh-type-display);
  line-height: var(--klh-type-display-lh);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

/* H1 — Playfair, section hero */
h1, .h1 {
  font-family: var(--klh-font-display);
  font-size: var(--klh-type-h1);
  line-height: var(--klh-type-h1-lh);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

/* H2 — Playfair, subsection opener */
h2, .h2 {
  font-family: var(--klh-font-display);
  font-size: var(--klh-type-h2);
  line-height: var(--klh-type-h2-lh);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--space-12) 0 var(--space-4);
  text-wrap: balance;
}

/* H3 — Inter, clean subsection */
h3, .h3 {
  font-family: var(--klh-font-body);
  font-size: var(--klh-type-h3);
  line-height: var(--klh-type-h3-lh);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: var(--space-8) 0 var(--space-3);
}

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--klh-font-body);
  font-size: var(--klh-type-body);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-2);
}

/* PARAGRAPH — Clean, generous line-height */
p, .paragraph {
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
  max-width: 70ch;
}

/* LEDE — Opening paragraph, slightly larger */
.lede {
  font-size: var(--klh-type-lede);
  line-height: var(--klh-type-lede-lh);
  color: var(--klh-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 55ch;
  font-weight: 400;
}

/* SMALL TEXT */
small, .small {
  font-size: var(--klh-type-small);
  line-height: var(--klh-type-small-lh);
  color: var(--klh-text-tertiary);
}

/* ============================================================
   SIGNATURE ELEMENT: EYEBROW LABELS
   Mono, uppercase, spaced — used for section tags, tier badges,
   metadata labels. Gives Klarhimmel a distinctive, editorial feel.
   ============================================================ */

.eyebrow, .label {
  display: inline-block;
  font-family: var(--klh-font-mono);
  font-size: var(--klh-type-eyebrow);
  font-weight: var(--klh-eyebrow-weight);
  letter-spacing: var(--klh-eyebrow-letter);
  text-transform: uppercase;
  color: var(--klh-eyebrow-color);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

/* TIER BADGE — Klarhimmel signature: mono label with hairline border */
.tier-badge, [data-tier] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--klh-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--klh-radius-sm);
  background: transparent;
  white-space: nowrap;
}

.tier-badge[data-tier="premium"] {
  color: var(--klh-tier-premium);
  border-color: var(--klh-tier-premium);
}

.tier-badge[data-tier="standard"] {
  color: var(--klh-tier-standard);
  border-color: var(--klh-tier-standard);
}

.tier-badge[data-tier="entry"] {
  color: var(--klh-tier-entry);
  border-color: var(--klh-tier-entry);
}

/* HAIRLINE RULE — Subtle mono accent */
.rule, hr, .divider {
  border: none;
  border-top: var(--klh-border-strong);
  margin: var(--space-12) 0;
  opacity: 0.5;
}

.rule-light, .divider-light {
  border-top: var(--klh-border-subtle);
  margin: var(--space-8) 0;
}

/* ============================================================
   LINKS & INLINE ELEMENTS
   ============================================================ */

a, .link {
  color: var(--klh-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--klh-gray-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover, .link:hover {
  text-decoration-color: var(--klh-text-primary);
}

a:visited, .link:visited {
  color: var(--klh-gray-600);
}

/* STRONG — Bolder weight */
strong, .strong {
  font-weight: 600;
  color: var(--klh-text-primary);
}

/* CODE — Mono, subtle background */
code, .code {
  font-family: var(--klh-font-mono);
  font-size: 0.9em;
  background-color: var(--klh-bg-secondary);
  padding: 0.2em 0.5em;
  border-radius: var(--klh-radius-sm);
  color: var(--klh-text-primary);
  white-space: nowrap;
}

/* CODE BLOCK — Dark theme */
pre, .pre {
  font-family: var(--klh-font-mono);
  font-size: var(--klh-type-small);
  line-height: 1.6;
  background-color: var(--klh-gray-900);
  color: var(--klh-gray-100);
  padding: var(--space-6);
  border-radius: var(--klh-radius-md);
  border: 1px solid var(--klh-gray-800);
  overflow-x: auto;
  margin: var(--space-6) 0;
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* BLOCKQUOTE — Left hairline accent */
blockquote, .blockquote {
  border-left: 2px solid var(--klh-accent-mono);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  color: var(--klh-text-secondary);
  font-style: italic;
  max-width: 60ch;
}

blockquote p {
  margin: 0;
}

/* LISTS */
ul, ol {
  margin: var(--space-4) 0 var(--space-6) 0;
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-3);
  line-height: var(--klh-type-body-lh);
}

/* ============================================================
   BUTTONS — Stark, confident
   ============================================================ */

button, .btn, .button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--klh-font-body);
  font-size: var(--type-button);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border-radius: var(--klh-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

/* PRIMARY BUTTON — Black on white */
.btn-primary, button[type="submit"] {
  background-color: var(--klh-black);
  color: var(--klh-white);
  border-color: var(--klh-black);
}

.btn-primary:hover, button[type="submit"]:hover {
  background-color: var(--klh-gray-900);
  border-color: var(--klh-gray-900);
}

/* GHOST BUTTON — Border only */
.btn-ghost, button[type="reset"] {
  background-color: transparent;
  color: var(--klh-text-primary);
  border-color: var(--klh-text-primary);
}

.btn-ghost:hover {
  background-color: var(--klh-bg-secondary);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: var(--klh-font-body);
  font-size: var(--klh-type-body);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--klh-gray-400);
  border-radius: var(--klh-radius-md);
  background-color: var(--klh-bg-primary);
  color: var(--klh-text-primary);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--klh-black);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  font-family: var(--klh-font-body);
  font-size: var(--klh-type-small);
  font-weight: 600;
  color: var(--klh-text-primary);
  margin-bottom: var(--space-2);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: 52rem;
}

.container-wide {
  max-width: 90rem;
}

/* SECTION PADDING — Generous vertical rhythm */
section, .section {
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  section, .section {
    padding: var(--space-20) 0;
  }
}

/* GRID */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   DOCUMENT & PRINT STYLES
   ============================================================ */

@media print {
  body {
    color: var(--klh-text-primary);
    background-color: var(--klh-white);
  }

  a {
    color: var(--klh-text-primary);
  }

  .no-print {
    display: none !important;
  }

  section, .section {
    page-break-inside: avoid;
  }

  h1, h2 {
    page-break-after: avoid;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (prefers-color-scheme: dark) {
  /* Optional: dark mode support */
  /* For now, Klarhimmel is light-mode only */
}