/* ============================================================
   CANISANUM · Design-Tokens  (Referenz: Variante „Salbei", hell)
   Single Source of Truth für alle Theme-Prototypen + WP-Theme.
   Abgeleitet aus dem abgenommenen One-Pager (styles.css · [data-theme="salbei"]).
   Keine hartcodierten Werte in den Prototypen — immer var(--token).
   ============================================================ */
:root {
  /* ---- Marken-Grundfarben (fix, themeunabhängig) ---------------- */
  --color-anthracite:     #2A3327;  /* Text / dunkle Flächen           */
  --color-anthracite-2:   #3A3E47;  /* Tiefe Variante                  */
  --color-sage:           #50703A;  /* Primär (Salbei-Grün)            */
  --color-sage-deep:      #3D5729;  /* Primär, gedrückt/hover          */
  --color-sage-soft:      #8BA87A;  /* Primär, hell                    */
  --color-gold:           #DA8A33;  /* Akzent (Sanddorn-Gold)          */
  --color-gold-deep:      #C2761F;  /* Akzent, gedrückt/hover          */

  /* ---- Flächen & Linien ---------------------------------------- */
  --color-bg:             #E7EDE0;  /* Seiten-Hintergrund              */
  --color-bg-2:           #DEE6D2;  /* Alternierender Abschnitt        */
  --color-surface:        #FBFCF8;  /* Karten / Panels                 */
  --color-surface-2:      #EBF0E2;  /* Eingaben / gefüllte Felder      */
  --color-hero-tint:      #DCE6CD;  /* Bild-/Hero-Tönung               */
  --color-line:           #D2DBC4;  /* Rahmen / Trenner                */

  /* ---- Text ---------------------------------------------------- */
  --color-text:           #2A3327;  /* Fließtext / Headlines           */
  --color-text-soft:      #50594A;  /* Sekundärtext                    */
  /* Kontrast (WCAG AA, 2026-09-25): Schrift braucht auf den hellen Flächen 4,5:1.
     Muted war #828B77 (2,8–3,5:1), Gold als Schrift 2,1–3,0:1. */
  --color-muted:          #616758;  /* Tertiär / Meta (Schrift)        */
  --color-muted-fill:     #828B77;  /* Muted als Fläche (Grafik 50 ml) */
  --color-gold-text:      #90571A;  /* Gold als kleine Schrift auf Hell */
  --color-on-primary:     #FBFCF8;  /* Text auf Primär/Anthrazit       */

  /* ---- Status (Formulare, Shop) -------------------------------- */
  --color-success:        #3D7A3A;
  --color-success-bg:     #E4F0E0;
  --color-error:          #B23B2E;
  --color-error-bg:       #F7E4E1;
  --color-info-bg:        #EBF0E2;

  /* ---- Zahlungs-/Trust-Neutral --------------------------------- */
  --color-focus:          var(--color-sage);

  /* ---- Typografie ---------------------------------------------- */
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-heading: var(--font-serif);
  --heading-weight: 500;
  --heading-tracking: -0.01em;
  --label-tracking: 0.18em;

  /* type scale (mobile → via clamp bereits fluide) */
  --fs-display: clamp(2.4rem, 6vw, 4rem);    /* Hero-Headline           */
  --fs-h1:      clamp(2rem, 4.4vw, 3rem);     /* Sektions-Headline       */
  --fs-h2:      clamp(1.6rem, 3.2vw, 2.3rem);
  --fs-h3:      1.35rem;
  --fs-lead:    1.15rem;                       /* Intro-Absätze           */
  --fs-body:    1rem;                          /* 16px Basis              */
  --fs-sm:      0.875rem;                       /* 14px                    */
  --fs-xs:      0.75rem;                         /* 12px Labels/Meta        */
  --lh-tight:   1.12;
  --lh-snug:    1.35;
  --lh-body:    1.6;

  /* ---- Abstände (4px-Raster) ----------------------------------- */
  --space-3xs: 0.25rem;   /*  4px */
  --space-2xs: 0.5rem;    /*  8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-s:   1rem;      /* 16px */
  --space-m:   1.5rem;    /* 24px */
  --space-l:   2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-section: clamp(3.5rem, 8vw, 7rem);  /* vertikaler Abschnitts-Abstand */

  /* ---- Layout -------------------------------------------------- */
  --maxw:       1180px;
  --maxw-text:  68ch;      /* Rechtstexte / Lesebreite */
  --pad-inline: clamp(1.25rem, 5vw, 4rem);

  /* ---- Radien -------------------------------------------------- */
  --radius-card:  14px;
  --radius-sm:    10px;
  --radius-input: 10px;
  --radius-pill:  999px;

  /* ---- Schatten ------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(42,51,39,.06), 0 2px 8px rgba(42,51,39,.05);
  --shadow-md: 0 8px 30px rgba(42,51,39,.10);
  --shadow-lg: 0 24px 60px rgba(42,51,39,.16);
  --btn-shadow: 0 10px 24px rgba(61,87,41,.26);

  /* ---- Bild-Seitenverhältnisse (Produktfotos) ------------------ */
  --ar-hero:       4 / 5;
  --ar-anwendung:  3 / 2;
  --ar-textur:     1 / 1;
  --ar-manufaktur: 16 / 9;

  /* ---- Motion -------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .1, 1);
  --dur:  .25s;

  /* ---- Z-Index-Ordnung ----------------------------------------- */
  --z-header: 60;
  --z-sticky-cta: 85;
  --z-drawer: 100;
  --z-overlay: 99;
  --z-toast: 120;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
  html { scroll-behavior: auto; }
}