/* ============================================================
   COLORS — Daniela Beutlhauser
   Warm, geerdet, feminin. Rotbraun + Weinrot auf Beige & Mauve.
   VERBOTEN: Orange (und orange-nahe Töne), helles Pink, Knallrot.
   ============================================================ */

:root {
  /* --- Brand primaries --- */
  --color-rotbraun: #8B3A2A;       /* Hauptfarbe: Headlines, CTAs, Akzente */
  --color-weinrot: #6B2020;        /* Sekundär: dunklere Akzente, Texte */

  /* Tints / shades derived from the two primaries (oklch-harmonious) */
  --color-rotbraun-soft: #A1574A;  /* hover/lighter rotbraun */
  --color-rotbraun-deep: #6F2C1F;  /* pressed/darker rotbraun */
  --color-weinrot-soft: #883232;   /* lighter weinrot */
  --color-weinrot-deep: #511616;   /* darkest accent */

  /* --- Warm backgrounds --- */
  --color-beige-hell: #F5EDE0;     /* page background, helle Flächen */
  --color-beige-mittel: #EDE0CC;   /* Karten, Slide-Hintergründe */
  --color-sand: #DFC9B0;           /* Trennflächen, subtile Akzente */
  --color-cream: #FBF6EE;          /* hellster Ton, Felder / Inputs */

  /* --- Mauve / Altrosa (Instagram & Overlays) --- */
  --color-mauve: #C4A8A8;          /* Overlay-Flächen, IG-Slides */
  --color-mauve-dunkel: #B08A8A;   /* dunklere Slide-Hintergründe */
  --color-mauve-deep: #8E6B6B;     /* mauve text on light */

  /* --- Neutrals (warm-leaning, never pure black) --- */
  --color-ink: #2E211C;            /* near-black warm brown for body text */
  --color-ink-soft: #5A4A42;       /* secondary text */
  --color-ink-faint: #8A7A70;      /* muted / captions */
  --color-line: #D8C6AE;           /* hairline borders on beige */
  --color-line-soft: #E7DAC6;      /* faint dividers */
  --color-white: #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */

  /* Surfaces */
  --surface-page: var(--color-beige-hell);
  --surface-card: var(--color-beige-mittel);
  --surface-raised: var(--color-cream);
  --surface-divider: var(--color-sand);
  --surface-overlay: var(--color-mauve);
  --surface-overlay-deep: var(--color-mauve-dunkel);
  --surface-inverse: var(--color-weinrot);

  /* Text */
  --text-heading: var(--color-rotbraun);
  --text-body: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-muted: var(--color-ink-faint);
  --text-on-dark: var(--color-cream);
  --text-accent: var(--color-weinrot);
  --text-signature: var(--color-rotbraun);

  /* Interactive */
  --action-primary: var(--color-rotbraun);
  --action-primary-hover: var(--color-rotbraun-soft);
  --action-primary-active: var(--color-rotbraun-deep);
  --action-secondary: var(--color-weinrot);
  --action-secondary-hover: var(--color-weinrot-soft);

  /* Lines & focus */
  --border-default: var(--color-line);
  --border-soft: var(--color-line-soft);
  --border-strong: var(--color-rotbraun);
  --focus-ring: color-mix(in oklch, var(--color-rotbraun) 45%, transparent);
}