/* Endlich Tiny House — Farbsystem
   Quelle: landingpage-12.html + tiny-house-rechner-NEU-v2.html (:root) */
:root{
  /* Basisflächen */
  --bg: #EEF1E6;            /* Seitenhintergrund, helles Salbeigrün */
  --surface: #FBF9F1;       /* Karten, Creme */
  --surface-2: #F2EFE3;     /* Eingabefelder, Chips, sekundäre Flächen */
  --paper: #F7F3E6;         /* Papierton der Sketch-Illustrationen / E-Book */

  /* Tinte (Text) */
  --ink: #1F2E23;           /* Primärtext, dunkles Tannengrün */
  --ink-soft: #55624F;      /* Fließtext / sekundär */
  --ink-faint: #8A9481;     /* Hinweise, Meta, Platzhalter */

  /* Markenakzente */
  --gold: #C08A2E;          /* Primärakzent (Logo-Ring, Slider, Marker) */
  --gold-deep: #9C6D22;     /* Gold auf hellem Grund (Text, Eyebrows) */
  --sun: #E0A831;           /* helles Gold für Verläufe/Hintergründe */
  --moss: #4C6B4F;          /* Markengrün */
  --moss-deep: #34492F;     /* dunkles Grün, Verläufe mit --ink */
  --rust: #B14B34;          /* Warnung / negativ */
  --terracotta: #C4633F;    /* zweiter Warm-Akzent (Badges, Karten-Akzente) */
  --sky: #3E7A8C;           /* kühler Drittakzent */
  --sky-deep: #2B5A69;
  --berry: #8B4A6B;         /* seltener vierter Akzent (Schritt 5, FAQ 4) */

  /* Linien */
  --line: #DAD5C2;          /* 1px Rahmen auf hellem Grund */

  /* Dunkle Flächen (Diff-Panel, Longterm-Box) */
  --dark-surface-grad: linear-gradient(160deg, var(--ink) 0%, var(--moss-deep) 100%);
  --on-dark-body: #C7D0C0;
  --on-dark-strong: #F2EFE3;
  --on-dark-line: #3A4A38;
  --on-dark-gold: #F0C368;
  --on-dark-eyebrow: #E8C685;
  --on-dark-terracotta: #E8946E;
  --on-dark-sky: #7FC4D9;

  /* Semantik (Ampel-System des Guides) */
  --ampel-gruen: var(--moss);
  --ampel-gelb: var(--gold);
  --ampel-rot: var(--rust);
  --status-positive-bg: #E7EEE3;
  --status-positive-fg: var(--moss-deep);
  --status-negative-bg: #F3E4DD;
  --status-negative-fg: var(--rust);

  /* Semantische Aliasse */
  --text-body: var(--ink-soft);
  --text-heading: var(--ink);
  --text-meta: var(--ink-faint);
  --text-accent: var(--gold-deep);
  --surface-card: var(--surface);
  --surface-page: var(--bg);

  /* Seitenhintergrund-Verlauf (warm oben links, grün oben rechts) */
  --page-bg:
    radial-gradient(1100px 560px at 12% -8%, rgba(192,138,46,0.14), transparent 60%),
    radial-gradient(900px 520px at 92% 6%, rgba(76,107,79,0.12), transparent 55%),
    var(--bg);
}