/* Anatomedic color system — warm, natural, neutral tones.
   Base palette from the corporate design; semantic aliases layered on top. */
:root {
  /* ---- Base neutrals (warm) ---- */
  --color-offwhite: #F7F4F1;   /* warmes Off-White — default page surface */
  --color-beige: #F1EBE5;      /* warmes Hellbeige — secondary surface */
  --color-frame: #E8E2DC;      /* heller Rahmen — borders / dividers */
  --color-white: #FFFFFF;
  --color-black: #111111;      /* Schwarz — primary ink & primary buttons */
  --color-gray: #6F6F6F;       /* dezentes Grau — muted text */

  /* ---- Accents (used sparingly) ---- */
  --color-green: #5D8A66;      /* ruhiges Grün — benefits, positive hints */
  --color-green-soft: #E7EFE8; /* tinted green surface */
  --color-gold: #D7A53F;       /* warmes Gold — ratings / stars */
  --color-gold-soft: #F6EDD8;  /* tinted gold surface */

  /* ---- Semantic aliases ---- */
  --surface-page: var(--color-offwhite);
  --surface-card: var(--color-white);
  --surface-muted: var(--color-beige);
  --surface-inverse: var(--color-black);

  --text-strong: var(--color-black);
  --text-body: #2A2A2A;
  --text-muted: var(--color-gray);
  --text-on-inverse: var(--color-white);

  --border-subtle: var(--color-frame);
  --border-strong: #D8D0C8;

  --accent-positive: var(--color-green);
  --accent-positive-surface: var(--color-green-soft);
  --accent-rating: var(--color-gold);
  --accent-rating-surface: var(--color-gold-soft);

  --focus-ring: color-mix(in oklch, var(--color-black) 55%, transparent);
}