/* ==========================================================================
   DOM – Design-Tokens (einzige Quelle für Farben, Schrift, Abstände)
   Farben abgeleitet aus dem Logo (Lebensbaum mit zwei Menschen).
   Gilt für Website, Flyer, Plakate, Visitenkarten …
   Hex-/CMYK-Tabelle für Druck: brand/README.md
   ========================================================================== */
:root {
  /* --- Grundfarben (aus dem Logo) -------------------------------------- */
  --dom-terrakotta:  #C26732;  /* linke Figur – Hauptakzent, Wärme            */
  --dom-oliv:        #7C7848;  /* rechte Figur, Blätter – Erdung, Natur       */
  --dom-senf:        #C9963F;  /* Senfgold – oberstes Blatt, Licht            */
  --dom-zimt:        #A36A2A;  /* Schriftzug „DOM“, Stamm – Wortmarke         */
  --dom-kamel:       #C39E6D;  /* Kamel – der Punkt im Baum, sanfte Flächen   */
  --dom-gold:        #B8803A;  /* Gold aus den Konzeptbildern – Schriftzug, Linien */
  --dom-gold-hell:   #E2B66A;
  --dom-gold-dunkel: #97601F;
  --dom-espresso:    #3B2A1E;  /* dunkles Erdbraun – Überschriften, Dunkel   */
  --dom-oliv-dunkel: #5A5733;  /* dunkles Oliv – Text auf hell möglich        */
  --dom-creme:       #FBF5EA;  /* Seitenhintergrund                           */
  --dom-sand:        #F1E8DA;  /* Flächen, Bänder                             */
  --dom-leinen:      #F4E6C8;  /* heller Senfton – Hinterlegungen             */
  --dom-tinte:       #2E241C;  /* Fließtext                                   */

  /* --- Funktionale Rollen (barrierearm geprüft, WCAG AA) ---------------- */
  --dom-bg:            var(--dom-creme);
  --dom-surface:       var(--dom-sand);
  --dom-text:          var(--dom-tinte);     /* 14,1 : 1 auf Creme */
  --dom-heading:       var(--dom-espresso);  /* 12,7 : 1 auf Creme */
  --dom-text-muted:    #6E5E50;              /*  5,8 : 1 auf Creme */
  --dom-akzent-text:   #9A4E22;              /*  5,6 : 1 – kleine Akzentschrift */
  --dom-akzent-gross:  var(--dom-terrakotta);/*  3,7 : 1 – nur große Schrift (≥ 24 px) */
  --dom-link:          #9A4E22;
  --dom-action:        #A8522A;              /* Button-Fläche, weiße Schrift 5,4 : 1 */
  --dom-action-hover:  #8A4220;
  --dom-on-dark:       var(--dom-creme);
  --dom-accent-on-dark: var(--dom-senf);     /* 5,2 : 1 auf Espresso */

  /* --- Verläufe --------------------------------------------------------- */
  --dom-verlauf-abend: linear-gradient(180deg, #EBCDB0 0%, #F2D9B5 38%, #F7E7C9 66%, #FBF2E2 100%);
  --dom-verlauf-gold:  linear-gradient(180deg, var(--dom-gold-hell) 0%, var(--dom-gold) 45%, var(--dom-gold-dunkel) 100%);
  --dom-verlauf-erde:  linear-gradient(135deg, var(--dom-senf) 0%, var(--dom-terrakotta) 55%, var(--dom-zimt) 100%);

  /* --- Schrift ---------------------------------------------------------- */
  --dom-font-display: "Cormorant Garamond", "Garamond", "Georgia", serif;
  --dom-font-schrift: "Allura", "Brush Script MT", cursive;  /* nur für den Claim */
  --dom-font-text:    "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Typo-Skala (fließend zwischen Handy und Desktop).
     Cormorant läuft klein – Display-Größen sind entsprechend großzügig. */
  --dom-fs-xs:   0.8125rem;
  --dom-fs-s:    0.9375rem;
  --dom-fs-m:    1.0625rem;                                  /* Fließtext */
  --dom-fs-l:    clamp(1.3rem, 1.2rem + 0.45vw, 1.55rem);    /* Lead / H4 */
  --dom-fs-xl:   clamp(1.65rem, 1.4rem + 1vw, 2.2rem);       /* H3 */
  --dom-fs-2xl:  clamp(2.1rem, 1.6rem + 2vw, 3.2rem);        /* H2 */
  --dom-fs-3xl:  clamp(2.9rem, 2rem + 4vw, 5.4rem);          /* H1 / Hero */

  --dom-lh-tight: 1.1;
  --dom-lh-text:  1.65;
  --dom-tracking-caps: 0.16em;

  /* --- Abstände & Formen ------------------------------------------------ */
  --dom-space-1: 0.25rem;
  --dom-space-2: 0.5rem;
  --dom-space-3: 0.75rem;
  --dom-space-4: 1rem;
  --dom-space-5: 1.5rem;
  --dom-space-6: 2rem;
  --dom-space-7: 3rem;
  --dom-space-8: 4.5rem;
  --dom-space-9: 7rem;

  --dom-radius-s: 8px;
  --dom-radius-m: 18px;
  --dom-radius-l: 32px;
  --dom-radius-rund: 999px;

  --dom-schatten: 0 1px 2px rgb(59 42 30 / 0.06), 0 8px 28px rgb(59 42 30 / 0.10);
  --dom-linie: 1px solid rgb(59 42 30 / 0.14);

  --dom-max-text: 64ch;
  --dom-max-seite: 1180px;
}