/*
 * GORILLA GARAGE — DESIGN TOKENS
 *
 * Single Source of Truth fuer alle Design-Entscheidungen.
 * Regel: KEINE Hardcoded-Hex-Werte ausserhalb dieser Datei. Niemals.
 * Wenn ein neuer Wert gebraucht wird, kommt er hier rein und wird per
 * var(--...) konsumiert.
 */

:root {
	/* ────────────────────────────────────────────────────────────
	 * FARBEN — Brand
	 * ──────────────────────────────────────────────────────────── */

	--gg-black:        #0A0A0A;
	--gg-black-soft:   #141414;
	--gg-white:        #FFFFFF;
	--gg-off-white:    #F5F5F5;

	--gg-red:          #C8102E;
	--gg-red-bright:   #E63946;
	--gg-red-dark:     #8B0F1F;

	--gg-gold:         #C9A24C;

	--gg-grey-300:     #D1D1D1;
	--gg-grey-500:     #8A8A8A;
	--gg-grey-700:     #3A3A3A;

	/* ────────────────────────────────────────────────────────────
	 * FARBEN — Semantisch (verweisen auf Brand-Tokens)
	 * ──────────────────────────────────────────────────────────── */

	--color-bg:                var(--gg-white);
	--color-bg-alt:            var(--gg-off-white);
	--color-bg-dark:           var(--gg-black);
	--color-bg-dark-alt:       var(--gg-black-soft);

	--color-text:              var(--gg-grey-700);
	--color-text-muted:        var(--gg-grey-500);
	--color-text-on-dark:      var(--gg-off-white);
	--color-text-muted-on-dark:var(--gg-grey-300);

	/* Headings bleiben kraeftig (Body wird gezielt dunkelgrau fuer wertigeren Look) */
	--color-heading:           var(--gg-black);
	--color-heading-on-dark:   var(--gg-white);

	--color-border:            var(--gg-grey-300);
	--color-border-dark:       var(--gg-grey-700);

	--color-accent:            var(--gg-red);
	--color-accent-hover:      var(--gg-red-bright);
	--color-accent-pressed:    var(--gg-red-dark);
	--color-premium:           var(--gg-gold);

	--color-focus-ring:        var(--gg-red);

	/* ────────────────────────────────────────────────────────────
	 * TYPOGRAFIE — Font-Stacks
	 * ──────────────────────────────────────────────────────────── */

	/* Adobe Fonts Kit eta6mvb — Avenir LT Pro (Regular 400, Bold 700, jeweils + Italic) */
	--font-headline: "avenir-lt-pro", "Helvetica Neue", Arial, sans-serif;
	--font-body:     "avenir-lt-pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono:     'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* ────────────────────────────────────────────────────────────
	 * TYPOGRAFIE — Fluid Type Scale (clamp)
	 * ──────────────────────────────────────────────────────────── */

	--fs-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
	--fs-sm:    clamp(0.875rem, 0.8rem  + 0.375vw, 1rem);
	--fs-base:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
	--fs-lg:    clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
	--fs-xl:    clamp(1.5rem,   1.3rem  + 1vw,    2rem);
	--fs-2xl:   clamp(2rem,     1.6rem  + 2vw,    3rem);
	--fs-3xl:   clamp(2.5rem,   1.8rem  + 3.5vw,  4.5rem);
	--fs-hero:  clamp(3rem,     2rem    + 5vw,    7rem);

	/* ────────────────────────────────────────────────────────────
	 * TYPOGRAFIE — Line-Heights, Tracking, Weights
	 * ──────────────────────────────────────────────────────────── */

	--lh-tight:    1.1;
	--lh-snug:     1.25;
	--lh-normal:   1.5;
	--lh-relaxed:  1.6;
	--lh-loose:    1.8;

	--ls-tighter:  -0.04em;
	--ls-tight:    -0.02em;
	--ls-normal:   0;
	--ls-wide:     0.05em;
	--ls-wider:    0.12em;
	--ls-widest:   0.2em;

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    900;

	/* ────────────────────────────────────────────────────────────
	 * SPACING — 8px-Basis
	 * ──────────────────────────────────────────────────────────── */

	--space-0:   0;
	--space-1:   0.25rem;  /*   4px */
	--space-2:   0.5rem;   /*   8px */
	--space-3:   0.75rem;  /*  12px */
	--space-4:   1rem;     /*  16px */
	--space-5:   1.25rem;  /*  20px */
	--space-6:   1.5rem;   /*  24px */
	--space-8:   2rem;     /*  32px */
	--space-10:  2.5rem;   /*  40px */
	--space-12:  3rem;     /*  48px */
	--space-16:  4rem;     /*  64px */
	--space-20:  5rem;     /*  80px */
	--space-24:  6rem;     /*  96px */
	--space-32:  8rem;     /* 128px */
	--space-40: 10rem;     /* 160px */

	--section-padding-block:    clamp(var(--space-16), 8vw, var(--space-32));
	--section-padding-block-sm: clamp(var(--space-12), 6vw, var(--space-20));

	/* ────────────────────────────────────────────────────────────
	 * POLYGON-CUT-SYSTEM — Signature Chevrons
	 * ──────────────────────────────────────────────────────────── */

	--chevron-depth:    32px;
	--chevron-depth-sm: 16px;
	--chevron-depth-lg: 48px;

	--clip-chevron-right: polygon(
		0 0,
		calc(100% - 32px) 0,
		100% 50%,
		calc(100% - 32px) 100%,
		0 100%
	);

	--clip-chevron-left: polygon(
		32px 0,
		100% 0,
		100% 100%,
		32px 100%,
		0 50%
	);

	--clip-chevron-both: polygon(
		32px 0,
		calc(100% - 32px) 0,
		100% 50%,
		calc(100% - 32px) 100%,
		32px 100%,
		0 50%
	);

	/* Header-Klingen (Topbar + Nav als content-sized rechtsbündige Tabs).
	 * Die Klingen wachsen mit dem rechtsbündigen Inhalt — Breite = Content + Slant + Container-Edge-Padding.
	 * Beide Tabs nutzen denselben Schräg-Wert; die Endpositionen rechts fluchten mit dem Container.
	 */
	--gg-tab-slant: 56px;

	/* Lokale Klingen-Clip-Path: top-edge ist um --gg-tab-slant einrückt → schräge linke Kante (/-Richtung).
	 * Die Klinge selbst ist inline-flex und auto-sized, deshalb sind die Koordinaten relativ zur Klinge. */
	--clip-blade-tab: polygon(
		var(--gg-tab-slant) 0,
		100% 0,
		100% 100%,
		0 100%
	);

	/* Legacy alias — ersetzt durch --clip-blade-tab */
	--clip-nav-bar:     var(--clip-blade-tab);
	--clip-topbar-tab:  var(--clip-blade-tab);
	--clip-nav-tab:     var(--clip-blade-tab);

	--clip-card-corner: polygon(
		0 0,
		100% 0,
		100% calc(100% - 24px),
		calc(100% - 24px) 100%,
		0 100%
	);

	--clip-card-corner-tl: polygon(
		24px 0,
		100% 0,
		100% 100%,
		0 100%,
		0 24px
	);

	--clip-card-corner-tr: polygon(
		0 0,
		calc(100% - 24px) 0,
		100% 24px,
		100% 100%,
		0 100%
	);

	/*
	 * Button-Chevron — diagonale Cuts rechts oben + links unten.
	 * Cut-Tiefe per Variable, damit --sm / --lg sie lokal ueberschreiben koennen.
	 */
	--btn-chevron-cut: 14px;

	--clip-btn-chevron: polygon(
		0 0,
		calc(100% - var(--btn-chevron-cut)) 0,
		100% var(--btn-chevron-cut),
		100% 100%,
		var(--btn-chevron-cut) 100%,
		0 calc(100% - var(--btn-chevron-cut))
	);

	/* ────────────────────────────────────────────────────────────
	 * SCHATTEN
	 * ──────────────────────────────────────────────────────────── */

	--shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.06);
	--shadow-md:    0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-lg:    0 20px 60px rgba(0, 0, 0, 0.25);
	--shadow-xl:    0 30px 90px rgba(0, 0, 0, 0.35);
	--shadow-red:   0 8px 30px rgba(200, 16, 46, 0.35);
	--shadow-red-lg:0 16px 50px rgba(200, 16, 46, 0.45);
	--shadow-gold:  0 8px 30px rgba(201, 162, 76, 0.35);

	--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.08);

	/* ────────────────────────────────────────────────────────────
	 * LIGHT-BG-FADE
	 *
	 * Einheitliches helles 3D-Canvas: zwei diagonale Radial-Glows in den
	 * Ecken (top-left dezent, bottom-right etwas tiefer) plus diagonaler
	 * Linear-Verlauf white→off-white→white. Wird auf Light-Sections UND
	 * auf weißen Surfaces (Cards, Tiles) angewandt, damit überall, wo
	 * etwas weiß ist, derselbe Fade liegt.
	 *
	 * --bg-light-vignette ist die zusätzliche 140px-Inset-Vignette, die
	 * NUR auf großflächigen Sections sitzt (auf kleinen Cards würde sie
	 * den Surface komplett zudunkeln).
	 * ──────────────────────────────────────────────────────────── */

	--bg-light-fade:
		radial-gradient(ellipse 70% 55% at 18% 12%, rgba(0, 0, 0, 0.14) 0%, transparent 65%),
		radial-gradient(ellipse 80% 60% at 82% 88%, rgba(0, 0, 0, 0.18) 0%, transparent 65%),
		linear-gradient(160deg, var(--gg-white) 0%, var(--gg-off-white) 55%, var(--gg-white) 100%);

	--bg-light-vignette: inset 0 0 140px rgba(0, 0, 0, 0.08);

	/* ────────────────────────────────────────────────────────────
	 * DARK-BG-FADE
	 *
	 * Spiegelt das Body-Canvas (base.css): roter Glow top-left + goldener
	 * Glow bottom-right über einem Black→Black-Soft→Black-Verlauf. Wird in
	 * Kombination mit `background-attachment: fixed` verwendet — dann
	 * „windowt" jedes Dark-Surface die globale Canvas, statt ein eigenes
	 * Mini-Canvas zu bekommen (visuelle Kontinuität über Sections hinweg).
	 *
	 * Quelle der Werte: body in base.css. Wenn du dort änderst, hier mit
	 * ändern.
	 * ──────────────────────────────────────────────────────────── */

	--bg-dark-fade:
		radial-gradient(ellipse at 20% 0%, rgba(200, 16, 46, 0.10) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 100%, rgba(201, 162, 76, 0.08) 0%, transparent 55%),
		linear-gradient(180deg, var(--gg-black) 0%, var(--gg-black-soft) 50%, var(--gg-black) 100%);

	/* ────────────────────────────────────────────────────────────
	 * RADIEN
	 * ──────────────────────────────────────────────────────────── */

	--radius-none: 0;
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-pill: 9999px;

	/* ────────────────────────────────────────────────────────────
	 * CONTAINER
	 * ──────────────────────────────────────────────────────────── */

	--container-max:     1280px;
	--container-wide:    1440px;
	--container-narrow:  960px;
	/* Gutter links/rechts fuer JEDEN Container. Untergrenze 1.25rem statt
	 * 1rem: bei 16px klebten Headline und Check-Bullets auf kleinen
	 * Screens sichtbar am Rand. Aendern heisst site-weit aendern — genau
	 * so ist das Gutter ueberall einheitlich. */
	--container-padding: clamp(1.25rem, 3vw, 2rem);

	/* Distanz Viewport-Rand → Container-Content-Rand. Wird genutzt, damit
	 * Full-Bleed-Elemente (z.B. Header-Klingen) ihre Inhalts-Kante mit dem
	 * Container fluchten lassen können. */
	--container-edge: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--container-padding));

	/* Sticky-Header-Hoehe. Wird von main.js (initHeaderHeightVar) live
	 * gemessen und auf documentElement gesetzt. Fallback hier ist der
	 * Schaetzwert fuer Desktop (Topbar ~36 + Brand-Bar ~80 + Nav ~44). */
	--gg-header-h: 160px;

	/* ────────────────────────────────────────────────────────────
	 * BREAKPOINTS — als Custom Properties dokumentiert
	 * (CSS-Selektoren konsumieren sie nicht direkt, aber die Werte
	 *  sind hier als Referenz fuer Konsistenz)
	 * ──────────────────────────────────────────────────────────── */

	--bp-sm:  640px;
	--bp-md:  768px;
	--bp-lg:  1024px;
	/* --bp-xl ist zugleich der Header-Breakpoint: die Nav-Klinge ist
	 * content-sized und braucht mehr Platz als ein Section-Grid, sie klappt
	 * deshalb erst hier aus dem Drawer auf — nicht schon bei --bp-lg. */
	--bp-xl:  1280px;
	--bp-2xl: 1536px;

	/* ────────────────────────────────────────────────────────────
	 * MOTION — Durations & Easings
	 * ──────────────────────────────────────────────────────────── */

	--dur-instant:  80ms;
	--dur-fast:     150ms;
	--dur-base:     250ms;
	--dur-slow:     400ms;
	--dur-slower:   600ms;

	--ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
	--ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in:       cubic-bezier(0.4, 0, 1, 1);
	--ease-out:      cubic-bezier(0, 0, 0.2, 1);

	/* ────────────────────────────────────────────────────────────
	 * HOVER — Kanonische Pattern (4 Tokens für das ganze Theme)
	 *
	 * Statt 5 Lift-Werten, 4 Shadow-Rezepten und 3 Icon-Scales
	 * benutzt das Theme genau diese Tokens. Wer eine neue Card/Tile
	 * baut, greift hier rein — und ändert nichts inline.
	 *
	 * 1) --hover-lift-btn       → nur .btn (subtiler 1px-Lift)
	 * 2) --hover-lift-card      → Cards/Tiles (Lift, sichtbar aber zurückhaltend)
	 * 3) --hover-scale-icon     → Bubble-Icons (nur scale, siehe Memory)
	 * 4) --hover-nudge-arrow    → trailing Arrows in CTA-Slots
	 *
	 * Plus zwei geteilte Shadow-/Border-Sätze für Card-Hovers
	 * (dark-Context vs. light-Context), die nicht inline dupliziert
	 * werden.
	 * ──────────────────────────────────────────────────────────── */

	--hover-lift-btn:      translateY(-1px);
	--hover-lift-card:     translateY(-3px);
	--hover-scale-icon:    scale(1.08);
	--hover-nudge-arrow:   translateX(3px);

	/* Card-Hover auf dunklen Surfaces (Hero, dark-section, footer-cards) */
	--hover-shadow-card-dark:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 -1px 0 rgba(0, 0, 0, 0.7) inset,
		0 28px 60px -14px rgba(0, 0, 0, 0.85),
		0 10px 20px -6px rgba(0, 0, 0, 0.6);
	--hover-border-card-dark:     rgba(255, 255, 255, 0.12);
	--hover-border-card-dark-top: rgba(255, 255, 255, 0.22);

	/* Card-Hover auf hellen Surfaces (light-section, page-content) */
	--hover-shadow-card-light:
		0 22px 44px -18px rgba(0, 0, 0, 0.32),
		0 8px 16px -4px rgba(0, 0, 0, 0.18);
	--hover-border-card-light:    var(--gg-grey-500);

	/* ────────────────────────────────────────────────────────────
	 * Z-INDEX-System
	 * ──────────────────────────────────────────────────────────── */

	--z-base:      1;
	--z-raised:    10;
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-overlay:   300;
	--z-drawer:    400;
	--z-modal:     500;
	--z-toast:     600;
	--z-max:       9999;

	/* ────────────────────────────────────────────────────────────
	 * PHASE 3 — Header, Sticky, Status-Dots
	 * (additive — keine bestehenden Tokens überschrieben)
	 * ──────────────────────────────────────────────────────────── */

	--gg-status-open:          #2ECC71;
	--color-status-open:       var(--gg-status-open);
	--color-status-open-glow:  rgba(46, 204, 113, 0.18);
	--color-status-closed:     var(--gg-grey-500);

	--color-header-bg:         var(--gg-black);
	--color-header-bg-sticky:  rgba(10, 10, 10, 0.95);
	--header-backdrop-blur:    blur(12px);

	--color-overlay-scrim:     rgba(0, 0, 0, 0.6);
}

/*
 * Dark-Context-Override: innerhalb einer .section--dark / .section--dark-soft
 * werden semantische Text-Tokens automatisch invertiert, sodass Komponenten
 * unveraendert funktionieren — keine doppelten "card-on-dark"-Klassen noetig.
 *
 * Beide Dark-Varianten teilen denselben Context, damit Headlines, Text und
 * Borders auf jedem dunklen Hintergrund einheitlich lesbar bleiben.
 */
.section--dark,
.section--dark-soft,
[data-theme="dark"] {
	--color-bg:           var(--gg-black);
	--color-bg-alt:       var(--gg-black-soft);
	--color-text:         var(--gg-off-white);
	--color-text-muted:   var(--gg-grey-300);
	--color-heading:      var(--color-heading-on-dark);
	--color-border:       var(--gg-grey-700);
}

/*
 * Reduced-Motion: alle Animationen praktisch ausschalten.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-instant: 0ms;
		--dur-fast:    0ms;
		--dur-base:    0ms;
		--dur-slow:    0ms;
		--dur-slower:  0ms;
	}
}

/* ────────────────────────────────────────────────────────────
 * PHASE 4 — Frontpage Sections (additive, no overrides)
 * ──────────────────────────────────────────────────────────── */

:root {
	/* Reveal-Animation (utilities.css) */
	--reveal-distance: 16px;
	--reveal-duration: var(--dur-slow);

	/* Services-Bento — Card-Aspect-Ratio für Image-Slots */
	--bento-card-aspect: 4 / 3;

	/* Castrol — Akzentfarbe für Castrol-Servicepartner-Section
	 * (Castrol-Grün, PMS 348-Äquivalent). Wird sparsam für Bullets,
	 * Title-Akzent und Eyebrow eingesetzt; das Logo trägt die volle CI. */
	--color-castrol-green: #008542;

	/* Process-Steps — verbindende Linie (Desktop) */
	--process-line-color:  var(--gg-grey-300);
	--process-line-color-on-dark: var(--gg-grey-700);

	/* Reviews-TODO-Banner (nur für eingeloggte Editor:innen sichtbar) */
	--color-todo-banner-bg:  #FFF3BF;
	--color-todo-banner-fg:  #5C3A00;
	--color-todo-banner-bd:  #E8C26B;

	/* ────────────────────────────────────────────────────────────
	 * AUFBEREITUNG — Bereichs-Akzentfarbe (Blau)
	 *
	 * Bewusste Differenzierung zum Werkstatt-Brand-Rot. Siehe Memory
	 * project_gorilla_farbcode_bereiche (Team-Bestätigung 2026-05-15):
	 * Aufbereitung darf farblich aus dem Brand-Rot ausbrechen, weil sie
	 * eine andere Kundenerfahrung (Showroom-Glanz statt Maschinen-Werk)
	 * adressiert.
	 *
	 * TBD: Finaler Hex-Wert wird mit den Brand-Rot/Gold-Werten in der
	 * Branddesign-Session festgelegt (siehe PROJECT.md §4.1 — alle drei
	 * Marken-Farben sind bis dahin vorläufige Arbeitswerte). Der hier
	 * gewählte Blau-Ton orientiert sich am autopflege_big.png-Pin.
	 * ──────────────────────────────────────────────────────────── */

	--gg-blue-aufbereitung:    #1E5BAB; /* TBD — Arbeitsfarbe */
	--color-aufbereitung:      var(--gg-blue-aufbereitung);
	--color-aufbereitung-glow: rgba(30, 91, 171, 0.22);
	--shadow-aufbereitung:     0 8px 30px rgba(30, 91, 171, 0.35);
}