/*
 * Katja & Darius – Design Tokens
 * Quelle der Wahrheit: docs/hochzeit/design-brief.md
 * Palette & Typo abgeleitet aus Katjas Vorlage (design-vorlage/1.svg, 2.svg):
 *   Tinte  #482117 (Kastanie)  ·  Grund #E1E1E1 (Perlgrau)  ·  Ornament #B4B49F (Salbei)
 *   Karte  #F5F5F5 (Porzellan) ·  Spitze #FFFFFF             ·  Akzent  #F3DBB9 (Champagner)
 * Keine Laufzeit-Abhängigkeiten, keine CDNs. Schriften: /static/css/fonts.css
 */

:root {
  /* ─── Farbe: Rohwerte ─────────────────────────────────────────── */
  --c-chestnut-900: #2e140d;
  --c-chestnut:     #482117;   /* Primärtinte, Überschriften, Buttons */
  --c-chestnut-700: #5c2e22;   /* Hover auf dunklen Buttons */
  --c-chestnut-500: #8a5a4a;   /* Sekundärtext auf Hell (AA ≥ 4.4 auf Perl) */
  --c-chestnut-a60: rgb(72 33 23 / 0.60);
  --c-chestnut-a30: rgb(72 33 23 / 0.30);
  --c-chestnut-a15: rgb(72 33 23 / 0.15);   /* Haarlinien */
  --c-chestnut-a08: rgb(72 33 23 / 0.08);   /* Flächen-Tönung, Hover */

  --c-pearl-100:    #f5f5f5;   /* Porzellan – Karten, Formularflächen */
  --c-pearl-200:    #eaeae8;   /* Seitengrund hell */
  --c-pearl:        #e1e1e1;   /* Katjas Grundton – Sektionen */
  --c-pearl-400:    #d2d2cf;   /* Rahmen auf Grau, Skeletons */
  --c-lace:         #ffffff;
  --c-ivory:        #fbf8f3;   /* Text auf Kastanie */

  --c-sage:         #b4b49f;   /* Ornament (nur dekorativ, kein Text!) */
  --c-sage-300:     #d9d9cb;
  --c-sage-700:     #686955;   /* Salbei als Text (AA auf Porzellan 5.1) */

  --c-graphite:     #5f5f5f;   /* Grauer Fließtext/Meta (AA auf Perl 4.9) */
  --c-champagne:    #f3dbb9;   /* Akzent: Fortschritt, Auswahl, Highlight */
  --c-champagne-600:#c9a878;

  --c-success:      #4f6b4a;   /* gedecktes Grün, AA auf Porzellan */
  --c-danger:       #9b2c22;   /* gedecktes Rot,  AA auf Porzellan */
  --c-warning:      #8a6420;

  /* ─── Farbe: Semantik ─────────────────────────────────────────── */
  --color-bg:            var(--c-pearl-200);
  --color-bg-section:    var(--c-pearl);
  --color-bg-raised:     var(--c-pearl-100);
  --color-bg-inverse:    var(--c-chestnut);
  --color-text:          var(--c-chestnut);
  --color-text-muted:    var(--c-graphite);
  --color-text-soft:     var(--c-chestnut-500);
  --color-text-inverse:  var(--c-ivory);
  --color-ornament:      var(--c-sage);
  --color-line:          var(--c-chestnut-a15);
  --color-line-strong:   var(--c-chestnut-a30);
  --color-focus:         var(--c-chestnut);
  --color-accent:        var(--c-champagne);
  --color-selection:     rgb(243 219 185 / 0.75);
  --color-scrim:         rgb(20 9 6 / 0.72);     /* Lightbox-Hintergrund */

  /* ─── Typografie ─────────────────────────────────────────────── */
  --font-display: "Cormorant", "Cormorant Fallback", "Times New Roman", Georgia, serif;
  --font-script:  "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --font-sans:    "Jost", "Jost Fallback", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid Type Scale (Mobil 360px → Desktop 1440px), Verhältnis ~1.25 → 1.333 */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);   /* Legal, Fußnoten */
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.94rem);   /* Meta, Labels */
  --step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.13rem);   /* Fließtext */
  --step-1:  clamp(1.25rem, 1.17rem + 0.37vw, 1.50rem);   /* Lead, H4 */
  --step-2:  clamp(1.56rem, 1.42rem + 0.63vw, 2.00rem);   /* H3 */
  --step-3:  clamp(1.95rem, 1.72rem + 1.04vw, 2.67rem);   /* H2 klein */
  --step-4:  clamp(2.44rem, 2.06rem + 1.67vw, 3.55rem);   /* H2 */
  --step-5:  clamp(3.05rem, 2.45rem + 2.64vw, 4.74rem);   /* H1 */
  --step-6:  clamp(3.81rem, 2.88rem + 4.10vw, 6.31rem);   /* Display (Namen) */
  --step-7:  clamp(4.77rem, 3.33rem + 6.30vw, 8.42rem);   /* Hero-Display */

  --leading-tight:  1.02;   /* Display-Versalien */
  --leading-snug:   1.18;   /* Überschriften */
  --leading-normal: 1.55;   /* Sans-Fließtext */
  --leading-loose:  1.7;    /* Serif-Fließtext */

  --tracking-display: -0.012em;
  --tracking-normal:  0;
  --tracking-caps:    0.18em;   /* nur Kleinst-Labels in Versalien (sparsam) */
  --tracking-wide:    0.06em;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  --measure:        62ch;   /* max. Zeilenlänge Fließtext */
  --measure-narrow: 40ch;

  /* ─── Raum (8pt-Basis, fluid) ───────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   clamp(1.25rem, 1.10rem + 0.65vw, 1.75rem);
  --space-l:   clamp(1.75rem, 1.45rem + 1.30vw, 2.75rem);
  --space-xl:  clamp(2.50rem, 1.95rem + 2.40vw, 4.25rem);
  --space-2xl: clamp(3.50rem, 2.60rem + 3.90vw, 6.50rem);
  --space-3xl: clamp(5.00rem, 3.60rem + 6.20vw, 10.0rem);   /* Sektionsabstand */

  --gutter:       clamp(1.25rem, 0.80rem + 2.00vw, 2.50rem); /* Seitenrand */
  --container:    72rem;    /* 1152px */
  --container-narrow: 40rem;
  --header-h:     3.75rem;

  /* ─── Form ───────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;      /* Inputs, Chips – fast eckig, wie Papier */
  --radius-s:    6px;      /* Karten klein, Thumbnails */
  --radius-m:    14px;     /* Bottom-Sheet, Swipe-Karten */
  --radius-arch: 999px 999px 0 0;   /* Bogenfenster – Motiv der Sôltē-Kuppeln */
  --radius-pill: 999px;    /* nur Sprachumschalter & Tags */

  --hairline: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);

  --shadow-1: 0 1px 2px rgb(46 20 13 / 0.06), 0 2px 8px rgb(46 20 13 / 0.05);
  --shadow-2: 0 2px 6px rgb(46 20 13 / 0.07), 0 12px 32px rgb(46 20 13 / 0.09);
  --shadow-3: 0 8px 24px rgb(46 20 13 / 0.12), 0 30px 80px rgb(46 20 13 / 0.16); /* Swipe-Karte gehoben */

  /* ─── Bewegung ───────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);      /* "Seide": Standard für Reveals */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);      /* Seitenwechsel, Überblendungen */
  --ease-in:       cubic-bezier(0.55, 0, 1, 0.45);      /* Verlassen, Wegwischen */
  --ease-emph:     cubic-bezier(0.16, 1, 0.3, 1);       /* Hero, große Flächen */
  /* Feder (gedämpft, ~1 Überschwinger), für Karten/Swipe/Lightbox */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --ease-spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);

  --dur-instant: 90ms;    /* Tap-Feedback */
  --dur-fast:    180ms;   /* Hover, Toggle */
  --dur-base:    320ms;   /* Buttons, Tabs, kleine Panels */
  --dur-slow:    560ms;   /* Karten, Sheets */
  --dur-reveal:  900ms;   /* Scroll-Reveal */
  --dur-hero:    1600ms;  /* Intro-Choreografie gesamt */
  --stagger:     70ms;    /* Versatz Listen/Galerie */

  --reveal-shift: 18px;   /* Weg beim Einblenden */

  /* ─── Ebenen ─────────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-header: 50;
  --z-sheet: 80;
  --z-lightbox: 100;
  --z-toast: 120;

  /* ─── Diverses ──────────────────────────────────────────────── */
  --tap-min: 44px;        /* Mindest-Touch-Ziel (WCAG 2.5.5 / Apple HIG) */
  --lace-height: clamp(48px, 7vw, 100px);
  --map-bg: var(--c-pearl-200);
  --map-ink: var(--c-chestnut);
  --map-sage: var(--c-sage);

  color-scheme: light;
}

/* Reduzierte Bewegung: Dauer kollabiert, Wege entfallen. Komponenten nutzen
   die Tokens, also greift das global. Opazitäts-Überblendungen bleiben kurz erlaubt. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 200ms;   /* nur Fade, ohne Weg */
    --dur-hero: 1ms;
    --stagger: 0ms;
    --reveal-shift: 0px;
    --ease-spring: var(--ease-out);
    --ease-spring-soft: var(--ease-out);
  }
}

/* Hoher Kontrast / erzwungene Farben */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: #3d3d3d;
    --color-text-soft: var(--c-chestnut);
    --color-line: var(--c-chestnut-a60);
  }
}