/* ============================================================
   Pfotenmission — Design-Tokens
   Quelle: claude.ai-Designprojekt „Pfotenmission Design System"
   (tokens/colors.css, typography.css, spacing.css). Änderungen
   an der Designsprache zuerst dort, dann hier nachziehen.
   ============================================================ */

:root {
  /* ---- Basis-Neutrals (warme Grautöne) ---- */
  --paper:        #F5EFE6;
  --paper-deep:   #EDE4D6;
  --surface:      #FDFBF7;
  --surface-2:    #FBF6EE;
  --ink:          #2C2824;
  --ink-soft:     #55504A;
  --ink-muted:    #8A8178;
  --line:         #E4DACB;
  --line-strong:  #D3C6B2;
  --white:        #FFFFFF;
  --black:        #1B1815;

  /* ---- Marke: Caramel (primär, „Leder & Wärme") ---- */
  --caramel-50:   #F7EEE3;
  --caramel-100:  #EBD8C2;
  --caramel-300:  #D0A67C;
  --caramel-500:  #A9754F;
  --caramel-600:  #925F3D;
  --caramel-700:  #764A2F;

  /* ---- Marke: Sage (sekundär, „Ruhe & Natur") ---- */
  --sage-50:      #EDF0E8;
  --sage-100:     #D8DFCC;
  --sage-300:     #A7B291;
  --sage-500:     #7E8A6E;
  --sage-600:     #67735A;
  --sage-700:     #4F5945;

  /* ---- Marke: Teal (Hero-Untertitel, Akzente) ---- */
  --teal-100:     #D7EAE7;
  --teal-300:     #9FD3CD;
  --teal-500:     #2F9188;
  --teal-600:     #23756E;

  /* ---- Semantik ---- */
  --success:      #5E7C52;
  --success-bg:   #E7EEDF;
  --warning:      #B8823A;
  --warning-bg:   #F6E9D2;
  --danger:       #A5503F;
  --danger-bg:    #F3DFD8;

  /* ---- Semantische Aliasse (in Komponenten diese verwenden) ---- */
  --bg-page:        var(--paper);
  --bg-band:        var(--paper-deep);
  --surface-card:   var(--surface);
  --surface-inset:  var(--surface-2);
  --text-heading:   var(--ink);
  --text-body:      var(--ink-soft);
  --text-muted:     var(--ink-muted);
  --text-on-brand:  #FBF4EA;
  --brand:          var(--caramel-500);
  --brand-hover:    var(--caramel-600);
  --brand-pressed:  var(--caramel-700);
  --brand-tint:     var(--caramel-50);
  --accent:         var(--sage-500);
  --accent-hover:   var(--sage-600);
  --accent-tint:    var(--sage-50);
  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --focus-ring:     color-mix(in srgb, var(--caramel-500) 45%, transparent);

  /* ---- Foto-Hero-Muster (abgedunkelte Vollbild-Fotos) ---- */
  --scrim-hero:      linear-gradient(rgba(27, 24, 21, 0.52), rgba(27, 24, 21, 0.52));
  --scrim-hero-soft: linear-gradient(180deg, rgba(27,24,21,0.35), rgba(27,24,21,0.6));
  --text-on-photo:   #F5EFE6;
  --subtitle-on-photo: var(--teal-300);

  /* ---- Schrift-Familien ---- */
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Kaushan Script', 'Segoe Script', cursive;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-accent:  var(--font-script);

  /* ---- Schriftgrößen ---- */
  --fs-display:   3.5rem;
  --fs-h1:        2.5rem;
  --fs-h2:        1.875rem;
  --fs-h3:        1.375rem;
  --fs-h4:        1.125rem;
  --fs-lead:      1.25rem;
  --fs-body:      1rem;
  --fs-sm:        0.875rem;
  --fs-xs:        0.75rem;

  /* ---- Gewichte / Zeilenhöhen / Laufweiten ---- */
  --fw-regular:   400;
  --fw-medium:    600;
  --fw-bold:      700;
  --fw-heavy:     800;
  --lh-tight:     1.12;
  --lh-snug:      1.28;
  --lh-normal:    1.55;
  --lh-relaxed:   1.7;
  --ls-eyebrow:   0.18em;
  --ls-tight:     -0.01em;

  /* ---- Spacing (4px-Basis) ---- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.5rem;
  --sp-6:   2rem;
  --sp-7:   3rem;
  --sp-8:   4rem;
  --sp-9:   6rem;

  /* ---- Radien (weich & freundlich) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Schatten (warm getönt, weich) ---- */
  --shadow-xs:  0 1px 2px rgba(60, 44, 28, 0.06);
  --shadow-sm:  0 2px 8px rgba(60, 44, 28, 0.07);
  --shadow-md:  0 8px 24px rgba(60, 44, 28, 0.09);
  --shadow-lg:  0 18px 48px rgba(60, 44, 28, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Layout ---- */
  --container:        1160px;
  --container-narrow: 760px;
  --gutter:           var(--sp-5);

  /* ---- Motion (ruhig, ohne Bounce) ---- */
  --ease-soft:  cubic-bezier(0.33, 0.02, 0.15, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}