/* ============================================================
   ECHTE STARS — Color tokens
   Extracted verbatim from the CI-Book (Figma). The brand runs on a
   single warm orange, a warm near-black ink, and a warm grey — plus
   neutral surfaces. Values are NOT snapped to any grid.
   ============================================================ */

:root {
  /* --- Primary: Star Orange --- */
  --es-orange: #ed6d35;          /* rgb(237,109,53) — Primär-100, THE brand color */
  --es-orange-deep: #e57300;     /* rgb(229,115,0)  — deeper orange, buttons/press */

  /* Primär tint scale (brand builds tints as opacity of the orange over white) */
  --es-orange-10: #fdf0ea;
  --es-orange-20: #fbe2d6;
  --es-orange-40: #f6b69a;       /* Primär-40 */
  --es-orange-50: #f4a37f;       /* Primär-50 */
  --es-orange-60: #f28f66;       /* Primär-60 */
  --es-orange-70: #f0824f;       /* Primär-70 */
  --es-orange-80: #ee7942;       /* Primär-80 */

  /* --- Ink / near-black (warm) --- */
  --es-ink: #1d1d1b;             /* rgb(29,29,27)  — primary text */
  --es-ink-2: #282525;           /* rgb(40,37,37)  — dark surfaces (footer) */
  --es-black: #000000;

  /* --- Secondary grey (warm) --- */
  --es-grey: #575756;            /* rgb(87,87,86)  — secondary text */
  --es-grey-2: #555454;          /* rgb(85,84,84)  — Sekundärfarbe */
  --es-grey-muted: #6a737d;      /* rgb(106,115,125) — muted meta text */

  /* --- Neutral surfaces & lines --- */
  --es-white: #ffffff;
  --es-surface: #f4f5f6;         /* rgb(244,245,246) — panel/section background */
  --es-surface-2: #e9e9e9;       /* rgb(233,233,233) — alt panel */
  --es-line: #d4dce1;            /* rgb(212,220,225) — hairline borders */
  --es-line-soft: #ededed;

  /* ---------- Semantic aliases ---------- */
  --text-primary: var(--es-ink);
  --text-secondary: var(--es-grey);
  --text-muted: var(--es-grey-muted);
  --text-on-orange: var(--es-white);
  --text-on-dark: var(--es-white);
  --text-accent: var(--es-orange);

  --surface-page: var(--es-white);
  --surface-panel: var(--es-surface);
  --surface-dark: var(--es-ink-2);
  --surface-brand: var(--es-orange);
  --surface-card: var(--es-white);

  --border-default: var(--es-line);
  --border-strong: var(--es-ink);

  --accent: var(--es-orange);
  --accent-press: var(--es-orange-deep);
}