/* ============================================================
   SG Webdesign — Design Tokens (Static Site)
   Quelle: claude-design/design_handoff_sg_webdesign/colors_and_type.css
   Generiert/gepflegt zusammen mit clients/guggenmos-webdesign/tokens.json
   ============================================================ */

:root {
  /* ── Farben ─────────────────────────────────────────────── */
  --color-dark:        #1a150a;
  --color-dark-mid:    #2a2015;
  --color-cream:       #f5f0e3;
  --color-cream-dk:    #ede6d3;
  --color-white:       #ffffff;

  --color-accent:      #F28C28;
  --color-accent-dk:   #d4731a;
  --color-accent-lt:   #fef3e2;
  /* Akzent als KLEINE SCHRIFT auf hellem Grund.
     #F28C28 erreicht als Text auf Weiss nur 2,45:1 und auf Creme 2,16:1 —
     gefordert sind 4,5:1 (WCAG AA, Text unter 24px). Das betraf u. a. den
     Datenschutz-Link im Kontaktformular und die Links in den Rechtstexten.
     Derselbe Fehlertyp, der am 28.07. schon bei den Buttons behoben wurde.
     #a85800 erreicht 5,17:1 auf Weiss und 4,54:1 auf Creme.
     Die Markenfarbe selbst bleibt unveraendert — sie wird weiterhin fuer
     Flaechen, Rahmen, Ueberschriften-Akzente und grosse Schrift verwendet,
     wo der Kontrastwert ausreicht. */
  --color-accent-text: #a85800;

  --color-gray-4:      #444444;
  --color-gray-6:      #666666;
  --color-gray-9:      #999999;
  --color-border:      #e8e8e8;

  --on-dark-text:      #bbbbbb;
  --on-dark-muted:     #8a8a8a;

  /* ── Typografie ─────────────────────────────────────────── */
  /* Body/Headings bewusst system-ui: kein zusätzlicher Webfont-Ballast.
     Montserrat wird ausschließlich für das Logo-Wordmark geladen. */
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Kein Webfont-Abruf bei Google mehr (siehe Kommentar in
     tools/build-guggenmos-site.js). Falls Montserrat exakt zurueckkommen soll:
     woff2 selbst hosten und hier davorstellen — NICHT wieder verlinken. */
  --font-logo:    "Avenir Next", "Segoe UI Variable Display", Corbel, var(--font-body);

  /* Typo-Skala 2026-07-28: bewusst mehr Kontrast zwischen den Stufen.
     Vorher lagen Body, H3, Kartentitel und Navigation alle zwischen 13 und 18px —
     dadurch entstand optisch gar keine Hierarchie, die Seite wirkte flach.
     Die kleinste Stufe liegt jetzt bei 12px und wird nur noch fuer Labels
     verwendet, nicht mehr fuer Fliesstext (Lesbarkeit). */
  --fs-h1:        clamp(40px, 6vw, 68px);
  --fs-h2:        clamp(28px, 3.6vw, 42px);
  --fs-h3:        21px;
  --fs-body:      17px;
  --fs-sm:        15px;
  --fs-xs:        13px;
  --fs-xxs:       12px;

  --lh-tight:     1.05;
  --lh-snug:      1.3;
  --lh-normal:    1.7;

  --ls-tight:     -0.03em;
  --ls-h2:        -0.02em;
  --ls-wide:      0.12em;

  /* Zeilenlaenge: ab hier verbindlich statt pro Komponente neu erfunden. */
  --measure:      62ch;
  --measure-narrow: 46ch;

  /* ── Spacing (4px-Grid) ─────────────────────────────────── */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;  --space-20: 80px; --space-24: 96px;

  /* Sektionsrhythmus: vorher durchgaengig 72px fuer alles. Ohne Unterschied
     zwischen grossen und kleinen Abschnitten liest sich eine Seite als
     gleichfoermige Liste. Jetzt drei Stufen. */
  --section-y:        84px;
  --section-y-lg:     112px;
  --section-y-sm:     56px;
  --section-y-mobile: 56px;
  --container:        1080px;
  --container-narrow: 760px;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ── Schatten ───────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.13);

  /* ── Transitions ────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --ease-default:    cubic-bezier(0.25, 0.1, 0.25, 1);
}