/* Design-Tokens, uebernommen aus der Cafe-Chloe-Website (css/tokens.css).
   Quelle der Farben und Abstaende: Marken-Setup der Website. Die self-hosted
   Display-Schrift "Chloe" gibt es hier nicht, daher Fallback auf Playfair. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;700&display=swap');

:root {
  /* Farben */
  --color-brand-red: #C8314A;
  --color-bordeaux: #8B1A2D;
  --color-midnight: #1A0008;
  --color-off-white: #FAF0F4;
  --color-baby-pink: #F2A7BB;
  --color-coral: #E85D7A;
  --color-banana: #E8C547;
  --color-pink-light: #FDE8EF;
  --color-forest-green: #2D5F4F;
  --color-mint: #A8D5C4;
  --color-white: #FFFFFF;
  --color-text: #340E1C;
  --color-mauve: #884C5E;
  --color-mauve-light: #E1BEBF;

  --midnight-10: rgba(26, 0, 8, 0.1);
  --midnight-30: rgba(26, 0, 8, 0.3);
  --midnight-60: rgba(26, 0, 8, 0.6);
  --baby-pink-35: rgba(242, 167, 187, 0.35);

  /* abgeleitete UI-Rollen */
  --bg: var(--color-off-white);
  --surface: var(--color-white);
  --border: var(--mauve-light, #E1BEBF);
  --border-soft: rgba(136, 76, 94, 0.18);
  --text: var(--color-text);
  --text-muted: var(--color-mauve);
  --accent: var(--color-brand-red);

  /* Typografie */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-ui: 'DM Sans', system-ui, -apple-system, sans-serif;

  --tracking-ui: 0.12em;
  --tracking-uppercase: 0.15em;

  /* Abstaende */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radien */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Statusfarben */
  --ok: var(--color-forest-green);
  --warn: #B8860B;
  --danger: var(--color-brand-red);
}