/*
 * Design Tokens – FOAG Feedback-App
 * Stil: Rustikal/Handwerklich
 * Palette: Warmes Pergament + Goldbraun/Sepia
 */

:root {
  /* ── Hintergründe ── */
  --bg-paper:        #F5F0E8;   /* warmes Pergament */
  --bg-paper-darker: #EBE3D4;
  --bg-page:         #DDD4C0;   /* Seiten-Grundton, etwas dunkler */

  /* ── Primär-/Akzentfarben ── */
  --color-primary:         #8B6914;  /* warmes Goldbraun */
  --color-primary-light:   #A07A1C;
  --color-primary-dark:    #6E520F;
  --color-primary-faint:   #F7F0E0;
  --color-secondary:       #6B4E1A;
  --color-secondary-light: #9B7A3A;

  /* ── Texte ── */
  --color-text:       #2B2018;
  --color-text-muted: #6B5C4A;
  --color-text-light: #9B8E80;

  /* ── Status-Farben ── */
  --color-success:       #4A6741;
  --color-success-light: #E8F0E5;
  --color-error:         #8B2C2C;
  --color-error-light:   #F5E8E8;
  --color-warning:       #7A6030;
  --color-warning-light: #F5F0E0;

  /* ── Rahmen & Trennlinien ── */
  --color-border:       #C4B49E;
  --color-border-light: #D8CEBD;
  --color-border-focus: #8B6914;

  /* ── Typografie ── */
  --font-headline:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-handwriting: 'Caveat', 'Comic Sans MS', cursive;

  /* ── Schriftgrößen ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* ── Abstände ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Radien ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Schatten ── */
  --shadow-sm:   0 1px 3px rgba(43, 32, 24, 0.10);
  --shadow-md:   0 4px 12px rgba(43, 32, 24, 0.12);
  --shadow-lg:   0 8px 24px rgba(43, 32, 24, 0.16);
  --shadow-card: 0 2px 8px rgba(43, 32, 24, 0.10), 0 0 0 1px var(--color-border);
  --shadow-page: 0 4px 32px rgba(107, 78, 26, 0.18), 0 0 0 1px rgba(139, 105, 20, 0.08);

  /* ── Übergänge ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

  /* ── Layout ── */
  --page-max-width: 480px;
  --page-padding:   1.5rem;

  /* ── Touch-Ziele ── */
  --touch-min: 56px;
}