/* burnt. – Farb-Tokens + Farbregeln je Untergrund (Briefing 3.2 / 3.3) */
:root {
  --color-blue: #001ED7;
  --color-blue-mid: #0622AF;
  --color-blue-dark: #00115F;
  --color-yellow: #FCF204;
  --color-yellow-dark: #DCD604;
  --color-lightblue: #64C3FF;
  --color-white: #FFFFFF;

  /* Semantik – Default = Untergrund Blau */
  --surface-bg: var(--color-blue);
  --text: var(--color-white);
  --eyebrow: var(--color-lightblue);
  --eyebrow-hero: var(--color-yellow);
  --label: var(--color-white);
  --dot: var(--color-yellow);
  --link: var(--color-white);
  --link-hover: var(--color-yellow);
  --link-hover-underline: transparent;
  --inline-link: var(--color-yellow);
  --inline-link-hover: var(--color-white);
  --inline-link-underline: var(--color-yellow);
  --btn-fg: var(--color-white);
  --btn-hover-bg: var(--color-white);
  --btn-hover-fg: var(--color-blue-dark);
  --rule: var(--color-blue-mid);
  --rule-vertical: var(--color-yellow);
  --accent-line: var(--color-yellow);
  --icon: var(--color-yellow);
  --highlight: var(--color-yellow);
  --digit-benefit: var(--color-yellow);
  --digit-step: var(--color-lightblue);
  --card-bg: var(--color-blue-dark);
  --quote-mark: var(--color-blue-mid);
  --chip-border: var(--color-blue);
  --focus: var(--color-yellow);
}

[data-surface="blue"] {
  --surface-bg: var(--color-blue);
}
[data-surface="blue-mid"] {
  --surface-bg: var(--color-blue-mid);
  --rule: var(--color-blue-dark);
  --quote-mark: var(--color-blue);
}
[data-surface="blue-dark"] {
  --surface-bg: var(--color-blue-dark);
  --rule: var(--color-blue);
  --card-bg: var(--color-blue);
  --quote-mark: var(--color-blue);
}
[data-surface="yellow"], [data-surface="yellow-dark"] {
  --surface-bg: var(--color-yellow);
  --text: var(--color-blue-dark);
  --eyebrow: var(--color-blue-dark);
  --eyebrow-hero: var(--color-blue-dark);
  --label: var(--color-blue-dark);
  --dot: var(--color-blue-dark);
  --link: var(--color-blue-dark);
  --link-hover: var(--color-blue-dark);
  --link-hover-underline: var(--color-blue-dark);
  --inline-link: var(--color-blue-dark);
  --inline-link-hover: var(--color-blue-dark);
  --inline-link-underline: var(--color-blue-dark);
  --btn-fg: var(--color-blue-dark);
  --btn-hover-bg: var(--color-blue-dark);
  --btn-hover-fg: var(--color-yellow);
  --rule: var(--color-yellow-dark);
  --rule-vertical: var(--color-yellow-dark);
  --accent-line: var(--color-blue-dark);
  --icon: var(--color-blue-dark);
  --highlight: var(--color-blue-dark);
  --digit-benefit: var(--color-blue-dark);
  --digit-step: var(--color-blue-dark);
  --card-bg: var(--color-blue-dark);
  --quote-mark: var(--color-yellow-dark);
  --focus: var(--color-blue-dark);
}
/* Karten auf Gelb: Gelb dunkel, Schrift Dunkelblau */
[data-surface="yellow-dark"] { --surface-bg: var(--color-yellow-dark); --rule: var(--color-yellow); }
[data-surface="yellow"], [data-surface="yellow-dark"] { --chip-border: var(--color-blue-dark); }
[data-surface="blue"] { --chip-border: var(--color-lightblue); }
[data-surface="blue-mid"] { --chip-border: var(--color-lightblue); }
/* Karten-Regel: Karte übernimmt die Regeln ihrer eigenen Fläche */
[data-surface] { background-color: var(--surface-bg); color: var(--text); }