/**
 * Hövelrat Design Tokens
 * Aus Figma "Hövelrat Relaunch 2026" – Design System (Farben, Typografie, Spacing).
 * Diese Datei enthaelt nur Variablen. Verwendung in style.css / sections.css.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Farben – Primary: Prussian Blue
	 * ------------------------------------------------------------------- */
	--hv-blue-900: #003056;
	--hv-blue-800: #123e62;
	--hv-blue-700: #335978;
	--hv-blue-500: #738da2;
	--hv-blue-300: #b2c1cc;
	--hv-blue-100: #e0e6eb;
	--hv-blue-50:  #f0f3f5;

	/* Farben – Secondary: Gold */
	--hv-gold-950: #8c7e57;
	--hv-gold-900: #a59466;
	--hv-gold-700: #b7a985;
	--hv-gold-500: #cec4ab;
	--hv-gold-300: #e4dfd1;
	--hv-gold-100: #f4f2ed;

	/* Farben – Neutrals */
	--hv-black:      #000000;
	--hv-neutral-900: #191c1e;
	--hv-neutral-800: #2b2e30;
	--hv-neutral-700: #47484b;
	--hv-neutral-600: #6a6b6d;
	--hv-neutral-500: #8c8e8f;
	--hv-neutral-400: #afb0b0;
	--hv-neutral-300: #cccdce;
	--hv-neutral-200: #e3e4e4;
	--hv-neutral-100: #f1f1f2;
	--hv-neutral-50:  #f7f7f7;
	--hv-white:       #ffffff;

	/* Farben – Status (WCAG AA) */
	--hv-success:        #407966;
	--hv-success-subtle: #f0f4f3;
	--hv-warning:        #be8c13;
	--hv-warning-text:   #8d680e;
	--hv-warning-subtle: #faf6ec;
	--hv-error:          #bf2f17;
	--hv-error-subtle:   #faeeec;
	--hv-info:           #226ba2;
	--hv-info-subtle:    #edf3f8;

	/* ---------------------------------------------------------------------
	 * Semantische Zuordnung
	 * ------------------------------------------------------------------- */
	--hv-color-text:       var(--hv-neutral-900);
	--hv-color-text-muted: var(--hv-neutral-600);
	--hv-color-heading:    var(--hv-blue-900);
	--hv-color-primary:    var(--hv-blue-900);
	--hv-color-primary-hover: var(--hv-blue-100);
	--hv-color-accent:     var(--hv-gold-900);
	/* Beschriftung auf der Goldflaeche: navy 4,51:1, weiss nur 2,99:1.
	 * Gold-Hover geht ins Dunklere; Navy-Hover auf blue-100 mit navy-Schrift. */
	--hv-color-on-accent:    var(--hv-white);      /* Gold-Buttons: weisse Typo (Figma) */
	--hv-color-accent-hover: var(--hv-gold-950);
	--hv-color-bg:         var(--hv-white);
	--hv-color-bg-alt:     var(--hv-gold-100);
	--hv-color-bg-soft:    var(--hv-blue-50);
	--hv-color-border:     var(--hv-neutral-200);
	--hv-color-on-primary: var(--hv-white);

	/* Flaechen aus dem Figma-Layout */
	/* Kartenflaeche, Kartenrand und Chip sind blaeulich getoent und weichen
	 * damit von der neutralen Grauskala ab. Werte aus der Vorlage. */
	--hv-color-card-bg:     #f0f3f5;
	--hv-color-card-border: #e0e6eb;
	--hv-color-chip-bg:     #e1e6ea;
	--hv-color-dark-bg:  var(--hv-blue-900);      /* Navbar / Footer */
	/* Menueschrift der Kopfzeile: der hellste Blauton der Skala. Auf der navy
	 * Leiste ergibt das 12,1:1 statt der 10,7:1 des naechstdunkleren Tons. */
	--hv-color-nav-text: var(--hv-blue-50);
	/* Flaechenbilder ganzer Sektionen (Hero, Newsletter, Praxis) haengen als
	 * Section-Hintergrund im BeBuilder und liegen in der Mediathek. Hier und
	 * in sections.css stehen nur noch Grundfarben und Effekte. Die Textur der
	 * Logokacheln bleibt Theme-Asset, weil sie zu einzelnen Karten gehoert. */

	/* ---------------------------------------------------------------------
	 * Korn / Stoerungseffekt
	 * feTurbulence erzeugt RGBA-Rauschen; feColorMatrix entsaettigt es und
	 * laesst den Alphakanal zufaellig. Dadurch ist die Kachel selbst schon
	 * halbtransparent und kann als normale Hintergrundebene ueber die
	 * Flaeche gelegt werden – ohne background-blend-mode, das mit
	 * gefilterten SVGs sichtbare Kachelkanten erzeugt.
	 * ------------------------------------------------------------------- */
	/* Korn fuer die Navy-Flaechen. Deckend und um Mittelgrau zentriert: der
	 * Rotkanal des Rauschens wird nach RGB kopiert, Alpha auf 1 gesetzt.
	 * Ueber mix-blend-mode: overlay hellt es dadurch genauso oft auf wie es
	 * abdunkelt – die Grundfarbe bleibt erhalten, nur die Koernung kommt dazu.
	 * Ein Korn, das nur aufhellt, verschiebt dagegen den ganzen Farbton. */
	--hv-noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 -0.23 1 0 0 0 -0.23 1 0 0 0 -0.23 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
	--hv-noise-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

	/* ---------------------------------------------------------------------
	 * Typografie
	 * ------------------------------------------------------------------- */
	--hv-font-head: "Spline Sans", "Helvetica Neue", Arial, sans-serif;
	--hv-font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

	/* Font-Skala aus Figma, in rem statt px. Bezug ist die Grundschriftgroesse
	 * des Browsers – sie wird bewusst nirgends ueberschrieben. Stellt jemand
	 * sie im Browser groesser, waechst die ganze Seite mit; bei px-Angaben
	 * bliebe sie stehen. Der Kommentar hinter jedem Wert nennt die Groesse
	 * bei der Voreinstellung von 16px.
	 * Line-Heights sind Verhaeltniszahlen, damit sie mitwachsen. */
	--hv-fs-display: 3.5rem;    --hv-lh-display: 1.10;  /* 56 */
	--hv-fs-h1: 2.75rem;        --hv-lh-h1: 1.15;       /* 44 */
	--hv-fs-h2: 2.125rem;       --hv-lh-h2: 1.20;       /* 34 */
	--hv-fs-h3: 1.625rem;       --hv-lh-h3: 1.25;       /* 26 */
	--hv-fs-h4: 1.25rem;        --hv-lh-h4: 1.30;       /* 20 */
	--hv-fs-h5: 1.0625rem;      --hv-lh-h5: 1.35;       /* 17 */
	--hv-fs-body-l: 1.125rem;   --hv-lh-body-l: 1.60;   /* 18 */
	--hv-fs-body: 1rem;         --hv-lh-body: 1.60;     /* 16 */
	--hv-fs-body-s: 0.875rem;   --hv-lh-body-s: 1.55;   /* 14 */
	--hv-fs-caption: 0.75rem;   --hv-lh-caption: 1.45;  /* 12 */
	--hv-fs-label: 0.6875rem;   --hv-lh-label: 1.40;    /* 11 */

	/* Rollen: was an welcher Stelle gilt. Die Bereiche haben eigene Groessen,
	 * die sich unabhaengig voneinander verschieben lassen – die Fusszeile
	 * bleibt klein, waehrend Fliesstext und Navigation groesser stehen. */
	--hv-fs-nav:    var(--hv-fs-body);      /* 16 – Navigation */
	--hv-lh-nav:    var(--hv-lh-body);
	--hv-fs-copy:   var(--hv-fs-body-l);    /* 18 – Fliesstext */
	--hv-lh-copy:   var(--hv-lh-body-l);
	--hv-fs-card:   var(--hv-fs-body);      /* 16 – Text in Karten und Kacheln */
	--hv-lh-card:   var(--hv-lh-body);
	--hv-fs-footer: var(--hv-fs-body-s);    /* 14 – Fusszeile */
	--hv-lh-footer: 1.571;                  /* 22px auf 14px, wie in der Vorlage */

	--hv-fw-light: 300;
	--hv-fw-regular: 400;
	--hv-fw-medium: 500;

	/* ---------------------------------------------------------------------
	 * Layout / Spacing
	 * ------------------------------------------------------------------- */
	--hv-container: 1440px;   /* volle Design-Breite */
	--hv-content: 1280px;     /* Inhaltsbreite (Container minus 2x80) */
	--hv-gutter: 80px;        /* seitliches Padding Desktop */
	--hv-col-gap: 24px;       /* Rinne zwischen Karten-Spalten */
	/* Hover-Schein der Karten: 0 0 28px. Soviel Luft brauchen die
	 * Slider-Viewports, sonst schneidet overflow:hidden den Schatten ab. */
	--hv-shadow-gutter: 32px;
	/* Kein Radius im Design – nur Buttons sind Pills (--hv-radius-pill). */
	--hv-radius: 0;
	--hv-radius-sm: 0;
	--hv-radius-lg: 0;
	--hv-radius-pill: 999px;
	--hv-radius-btn: 20px;    /* Buttons im Inhalt: 44px hoch, Radius 20 (Figma) */
	--hv-radius-btn-sm: 19px; /* Navbar-Button: 38px hoch */

	--hv-space-1: 8px;
	--hv-space-2: 16px;
	--hv-space-3: 24px;
	--hv-space-4: 32px;
	--hv-space-5: 40px;
	--hv-space-6: 48px;
	--hv-space-8: 64px;
	--hv-space-10: 80px;
	--hv-space-12: 100px;
}