/* ============================================================
   THEME — Design-Tokens (Farben, Schriften, Skala)
   v0.6 · Modernes, editorial Dark-Mode-Design
   Tradition (Cinzel) trifft Modern (Manrope)
   ============================================================ */

:root {
  /* Core palette */
  --ink:           #0A0E1A;
  --ink-soft:      #14182A;
  --ink-light:     #1F2438;
  --paper:         #F5F0E6;
  --paper-soft:    #E8E0CE;

  /* Accent — der eine, prägnante Goldton */
  --brass:         #C9A961;
  --brass-bright:  #E5C158;
  --brass-deep:    #8B7339;
  --brass-glow:    rgba(201, 169, 97, .18);

  /* Per-Page-Atmosphären (für Karussell-Hintergründe) */
  --forest-deep:   #0F1F18;
  --forest-mid:    #1B3A2F;
  --forest-bright: #2D5240;
  --walnut-deep:   #1F1408;
  --walnut-mid:    #3E2723;
  --walnut-light:  #5C4A36;
  --slate-deep:    #14171F;
  --slate-mid:     #2A3441;
  --slate-light:   #3D4A5C;
  --oxblood-deep:  #1A0810;
  --oxblood-mid:   #3A1820;
  --oxblood-light: #5A2A33;

  /* Type-Skala (Mobile-First) */
  --display:   2.5rem;       /* wird in base.css per media query hochskaliert */
  --headline:  1.75rem;
  --subhead:   1.15rem;
  --body:      1rem;
  --meta:      0.78rem;

  /* Layout */
  --content-max: 1320px;
  --gutter:      1.25rem;     /* wird in base.css per media query hochskaliert */
  --header-height: 60px;      /* wird in base.css per media query hochskaliert */

  /* Übergänge */
  --t-fast:   0.18s ease;
  --t-base:   0.25s ease;
  --t-slow:   0.4s ease;
}

@media (min-width: 640px) {
  :root {
    --display:  clamp(3rem, 6vw, 5rem);
    --headline: clamp(1.8rem, 3.5vw, 3rem);
    --gutter:   clamp(1.5rem, 4vw, 3rem);
    --header-height: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --display:  clamp(3.5rem, 8vw, 7.5rem);
    --headline: clamp(2rem, 5vw, 4rem);
    --subhead:  clamp(1.25rem, 2.4vw, 1.85rem);
    --gutter:   clamp(1.5rem, 4vw, 4rem);
    --header-height: 80px;
  }
}