/*
 * variables.css
 * ─────────────────────────────────────────────────────
 * Design-Tokens: Farben, Schriften, Radien, Schatten.
 * Alle Werte als CSS Custom Properties definiert,
 * sodass sie global wiederverwendbar sind.
 */

:root {
  /* ── Primärfarben (Gold-Palette) ── */
  --color-primary:              #b08d37;
  --color-primary-dim:          #96772e;
  --color-primary-container:    #f5edd4;
  --color-on-primary:           #fffdf5;
  --color-on-primary-container: #6b5a2a;
  --color-primary-fixed:        #f5edd4;
  --color-primary-fixed-dim:    #e8ddc0;

  /* ── Sekundärfarben (Warm/Braun) ── */
  --color-secondary:              #6b5d44;
  --color-secondary-dim:          #5e5239;
  --color-secondary-container:    #f3e0c0;
  --color-on-secondary:           #fff8f0;
  --color-on-secondary-container: #5d5037;

  /* ── Tertiärfarben (Oliv/Grün) ── */
  --color-tertiary:              #596432;
  --color-tertiary-dim:          #4d5828;
  --color-tertiary-container:    #f0fdbd;
  --color-on-tertiary:           #f3ffc4;
  --color-on-tertiary-container: #576231;

  /* ── Fehlerfarben ── */
  --color-error:              #a83836;
  --color-error-dim:          #67040d;
  --color-error-container:    #fa746f;
  --color-on-error:           #fff7f6;
  --color-on-error-container: #6e0a12;

  /* ── Oberflächen ── */
  --color-surface:                  #f8faf8;
  --color-surface-dim:              #d4dcd9;
  --color-surface-bright:           #f8faf8;
  --color-surface-variant:          #dde4e1;
  --color-surface-container-lowest: rgb(244 244 241 / 0, 79);
  --color-surface-container-low:    #f4f4f1;
  --color-surface-container: #efeeea;
  --color-surface-container-high: #e9e9e4;
  --color-surface-container-highest: #e4e3dd;
  --color-surface-tint:             #b08d37;
  --color-background: #fafaf8;

  /* ── Text auf Oberflächen ── */
  --color-on-surface:         #2d3432;
  --color-on-surface-variant: #59615f;
  --color-on-background:      #2d3432;

  /* ── Umrisse ── */
  --color-outline:         #757c7a;
  --color-outline-variant:  #acb3b1;

  /* ── Inverse (für dunkle Akzente) ── */
  --color-inverse-surface:    #0b0f0e;
  --color-inverse-on-surface: #9b9d9c;
  --color-inverse-primary:    #f5edd4;

  /* ── Typografie ── */
  --font-headline: 'Manrope', sans-serif;
  --font-body:     'Manrope', sans-serif;
  --font-label:    'Manrope', sans-serif;

  /* ── Radien ── */
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   2rem;
  --radius-xl:   3rem;
  --radius-full: 9999px;

  /* ── Schatten ── */
  --shadow-sm:  0 1px 3px rgba(45,52,50,0.08);
  --shadow-md:  0 4px 12px rgba(45,52,50,0.10);
  --shadow-lg:  0 10px 30px rgba(45,52,50,0.12);
  --shadow-xl:  0 20px 40px rgba(45,52,50,0.15);
  --shadow-nav: 0 20px 40px rgba(45,52,50,0.06);

  /* ── Übergänge ── */
  --transition-fast: 300ms ease;
  --transition-med:  500ms ease;
}