/* ── Colors ──────────────────────────────────────────────────────────
   Behindertenbeirat Kirchheim
   Lifted from the logo silhouettes and the live temporary website.
   The brand reads as warm, civic and optimistic: a calm teal anchor,
   a warm coral accent, and a full "community spectrum" of figure colors
   that echo the inclusive crowd in the logo. */

:root {
  /* ── Brand core: teal ── */
  --teal-900: #00565f;
  --teal-700: #00727e; /* hover / dark teal */
  --teal-500: #0097a7; /* PRIMARY */
  --teal-300: #5cc0cb;
  --teal-100: #d6eef1;
  --teal-050: #f0fafa;
  --teal-glow: rgba(0, 151, 167, 0.15);

  /* ── Warm accent: coral ── */
  --coral-600: #b55d3f;
  --coral-500: #d47a5b; /* accent */
  --coral-300: #e8a48d;
  --coral-100: #f7e2d9;

  /* ── Value hues ── (Respekt / Teilhabe / Vielfalt + supporting) */
  --sage-600: #6a9a72;
  --sage-500: #9ab8a0;
  --sage-100: #e8f1ea;
  --lavender-500: #b8a9c9;
  --lavender-100: #efeaf4;
  --gold-500: #d4b94e;
  --gold-100: #f6efd2;

  /* ── Community spectrum ── the seven figures in the logo, left → right.
     Use for decorative dots, the top accent bar, and category coding. */
  --fig-taupe: #9c8e80;
  --fig-sage: #9bc1a6;
  --fig-green: #2e7d32; /* the wheelchair */
  --fig-cyan: #36b4c7;
  --fig-red: #e5392b;
  --fig-orange: #f4a01f;
  --fig-lavender: #9a8cc5;

  /* ── Ink & neutrals ── */
  --ink-900: #2c3e50; /* headings & body text */
  --ink-600: #5a6a7a; /* muted text */
  --ink-400: #8896a3;
  --navy-wordmark: #1f4e5f; /* the logo lettering */
  --white: #ffffff;

  /* ── Surfaces ── */
  --paper: #faf8f5; /* warm page background */
  --surface-0: #ffffff;
  --surface-sunken: #f3f0eb;
  --line: #e8e4df; /* hairline borders / dividers */

  /* ── Semantic aliases ── prefer these in components ── */
  --color-primary: var(--teal-500);
  --color-primary-hover: var(--teal-700);
  --color-primary-active: var(--teal-900);
  --color-on-primary: var(--white);
  --color-accent: var(--coral-500);
  --color-accent-hover: var(--coral-600);

  --text-heading: var(--ink-900);
  --text-body: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-on-teal: var(--white);
  --text-link: var(--teal-700);
  --text-link-hover: var(--teal-500);

  --surface-page: var(--paper);
  --surface-card: var(--surface-0);
  --surface-tint: var(--teal-050);
  --border-subtle: var(--line);
  --border-strong: var(--teal-500);

  --focus-ring: var(--coral-500);

  /* Value-token map */
  --value-respekt: var(--teal-500);
  --value-teilhabe: var(--coral-500);
  --value-vielfalt: var(--sage-600);
}