/* ZeckenBox — Color tokens
   Base palette taken verbatim from the brand guide (Farbpalette). */
:root{
  /* ---- Brand base (exact hex from brand guide) ---- */
  --zb-red:        #E30613; /* ZECKENBOX ROT — primary signal / logo / claim accent */
  --zb-graphit:    #1D1D1B; /* GRAPHIT — near-black, all body & headline text */
  --zb-green:      #5C6B45; /* OUTDOOR GRÜN — the case colour, secondary brand tone */
  --zb-hellgrau:   #F2F2F2; /* HELLGRAU — cool surface tint (legacy) */
  --zb-creme:      #F6F2E8; /* CREME — warm paper, default page tone (outdoor direction) */
  --zb-creme-200:  #EDE7D9; /* deeper creme — muted panels on paper */
  --zb-weiss:      #FFFFFF; /* WEISS */

  /* ---- Derived brand shades (harmonised from the base) ---- */
  --zb-red-600:    #C40510; /* hover / pressed red */
  --zb-red-700:    #A20410;
  --zb-red-050:    #FDECED; /* tint behind red content */
  --zb-green-700:  #47533A; /* darker olive — deep panels, box lid */
  --zb-green-800:  #363F2C;
  --zb-green-300:  #8B966F; /* lighter olive — line illustration, muted */
  --zb-green-050:  #EDF0E6; /* faint olive tint */

  /* ---- Neutral ramp ---- */
  --zb-ink:        #1D1D1B;
  --zb-grey-700:   #3A3A38;
  --zb-grey-500:   #6B6B68; /* muted text */
  --zb-grey-300:   #C9C9C6; /* strong border */
  --zb-grey-200:   #E4E4E1; /* default border / divider */
  --zb-grey-100:   #F2F2F2;
  --zb-grey-050:   #F8F8F7;

  /* ---- Risk scale (Risikokarte: Niedriges → Hohes Risiko) ---- */
  --zb-risk-1:     #3FA34D; /* niedrig */
  --zb-risk-2:     #8DBE3D;
  --zb-risk-3:     #E8C33C; /* mittel */
  --zb-risk-4:     #E8912F;
  --zb-risk-5:     #D8452B; /* hoch */

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--zb-creme);
  --color-bg-muted:      var(--zb-creme-200);
  --color-surface:       var(--zb-weiss);
  --color-surface-alt:   var(--zb-grey-050);
  --color-surface-olive: var(--zb-green);
  --color-surface-ink:   var(--zb-graphit);

  --color-text:          var(--zb-graphit);
  --color-text-muted:    var(--zb-grey-500);
  --color-text-inverse:  var(--zb-weiss);
  --color-text-on-olive: var(--zb-weiss);

  /* Outdoor direction: green leads; red is reserved for the logo mark,
     claim full-stops and danger — use var(--zb-red) directly for those. */
  --color-primary:       var(--zb-green);
  --color-primary-hover: var(--zb-green-700);
  --color-primary-press: var(--zb-green-800);
  --color-on-primary:    var(--zb-weiss);

  --color-accent:        var(--zb-green-700);
  --color-accent-hover:  var(--zb-green-800);
  --color-on-accent:     var(--zb-weiss);

  --color-border:        var(--zb-grey-200);
  --color-border-strong: var(--zb-grey-300);
  --color-ring:          color-mix(in srgb, var(--zb-green) 50%, transparent);

  --color-success:       var(--zb-risk-1);
  --color-warning:       var(--zb-risk-4);
  --color-danger:        var(--zb-red);
}