/* ============================================================
   COLORS — Maral Girke
   Warm, ruhig, hochwertig. Beige Basis, Anthracite trägt Lesbarkeit,
   Forest Green = Signalfarbe, Terracotta = selektiver Akzent.
   Gewichtung Web: ~70% Ivory/Sand, 15% Anthracite, 10% Green, 5% Terracotta.
   ============================================================ */
:root {
  /* ---- Base palette (CI-Dokument §3) ---- */
  --warm-ivory:   #F6F1EA;
  --sand:         #E7DDD2;
  --anthracite:   #2E2B29;
  --forest-green: #1F5A36;
  --terracotta:   #C86F44;

  /* ---- Tonal steps (derived, harmonious) ---- */
  --ivory-100: #FBF8F3;
  --ivory-200: #F6F1EA;   /* = warm ivory */
  --sand-300:  #EDE5D9;
  --sand-400:  #E7DDD2;   /* = sand */
  --sand-500:  #D8CBBB;   /* dividers, hairlines */
  --sand-600:  #C4B4A0;

  --green-700: #1F5A36;   /* = forest green */
  --green-800: #184A2C;   /* button hover — etwas dunkler */
  --green-900: #123A22;   /* pressed */
  --green-soft:#E3EBE4;   /* green tint surface */

  --terra-500: #C86F44;   /* = terracotta */
  --terra-600: #B65E36;   /* terracotta hover */
  --terra-soft:#F3E4DA;   /* terracotta tint surface */

  --ink-900: #2E2B29;     /* = anthracite */
  --ink-700: #4A4642;     /* secondary text */
  --ink-500: #6E675F;     /* muted / captions */
  --ink-300: #9A9188;     /* placeholder */

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--warm-ivory);
  --bg-page-alt:    var(--ivory-100);
  --surface-card:   var(--ivory-100);
  --surface-sand:   var(--sand);
  --surface-green:  var(--green-soft);
  --surface-terra:  var(--terra-soft);

  --text-primary:   var(--anthracite);
  --text-secondary: var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-on-green:  var(--warm-ivory);
  --text-accent:    var(--terracotta);

  --border-hairline: var(--sand-500);
  --border-strong:   var(--anthracite);

  --action-primary:        var(--forest-green);
  --action-primary-hover:  var(--green-800);
  --action-primary-press:  var(--green-900);
  --accent:                var(--terracotta);
  --accent-hover:          var(--terra-600);

  /* ---- Focus ring (Accessibility-Aufbau) ---- */
  --focus-ring: 0 0 0 3px rgba(31, 90, 54, 0.35);
}