/* JD designs — Color tokens
   Derived from CI-Richtlinie §4. Palette: deep fir green (brand anchor),
   warm wood/ochre (accent), creme/off-white (light ground). */

:root {
  /* ---- Primary — Tannengrün (fir green) ---- */
  --green-deep: #2F4A2C;   /* Tannengrün Tief — primary / web background, darkest */
  --green:      #3B5A34;   /* Tannengrün — surfaces, buttons, cards */
  --green-soft: #4F6E40;   /* Tannengrün Hell — hover, lines, dividers */

  /* ---- Accent — Holz / Ocker (wood / ochre) ---- */
  --ochre-light: #DCB880;  /* Ocker Hell — accent on dark, inverse logo rings, links on green */
  --ochre:       #B5854C;  /* Ocker — accent lines, icons, large highlights */
  --wood-deep:   #92673A;  /* Holz Tief — accent/link text on light, hover */

  /* ---- Neutrals — Creme & White ---- */
  --creme:  #F2E4C8;       /* Creme — warm light surface, cards, plaques */
  --paper:  #FCFAF5;       /* Cremeweiß — base light background, "paper" */

  /* ---- Status / system colors (shop) — earthy, muted (CI §4.5) ---- */
  --success:         #3F7A36;  --success-surface: #E7EFD9;  --success-text: #234A1E;
  --warning:         #C8851F;  --warning-surface: #F7EBD2;  --warning-text: #6E4A12;
  --error:           #A23A2E;  --error-surface:   #F3DED9;  --error-text:   #5E1F18;
  --info:            #3A6B6E;  --info-surface:    #DCE8E8;  --info-text:    #1E3D3F;

  /* ===========================================================
     Semantic aliases — default to the DARK / web mode (CI §4.4):
     the website's dominant ground is fir green.
     =========================================================== */
  --bg:            var(--green-deep);   /* page background */
  --surface:       var(--green);        /* card / panel on the green stage */
  --surface-raised: var(--green-soft);  /* raised / hover surface */
  --text:          var(--creme);        /* primary text on green */
  --text-muted:    var(--ochre-light);  /* secondary text on green */
  --accent:        var(--ochre-light);  /* accent / CTA on green */
  --link:          var(--ochre-light);  /* link on green */
  --border:        color-mix(in srgb, var(--ochre-light) 28%, transparent); /* divider on green */
  --focus-ring:    var(--ochre);        /* keyboard focus */

  /* Inverted scope — light "paper" cards inside the green stage,
     used for long reading text, product detail, checkout (CI §8.1). */
}

/* Light surfaces: opt-in via .on-paper. Long-form / functional areas
   run on creme/paper cards for readability (CI §8.1, §10). */
.on-paper {
  --bg:         var(--paper);
  --surface:    var(--creme);
  --surface-raised: var(--paper);
  --text:       var(--green-deep);
  --text-muted: var(--green-soft);
  --accent:     var(--wood-deep);   /* on light, accent text must be Holz Tief for AA (CI §10) */
  --link:       var(--wood-deep);
  --border:     color-mix(in srgb, var(--green-soft) 26%, transparent);
  --focus-ring: var(--wood-deep);
  background: var(--bg);
  color: var(--text);
}