/**
 * Ebene 1 – Primitive Tokens
 *
 * Unveränderliche Basiswerte. Sie ändern sich NIE über Breakpoints und werden
 * von Komponenten nicht direkt verwendet, sondern nur über semantische Tokens
 * (semantic.css) und Theme-Tokens (theme.css).
 *
 * Konvention: --[kategorie]-[name]-[stufe], einfacher Bindestrich.
 * Einheiten: rem für Größen/Abstände (1rem = 16px Browser-Standard), em für
 * Laufweite und Breakpoints, keine px.
 */
:root {
	/* ---------------------------------------------------------------- Farben */
	--color-coral-100: #fdeaea;
	--color-coral-300: #f49a9a;
	--color-coral-500: #ee6060;
	--color-coral-700: #c93c3c;

	--color-ink-900: #111111;
	--color-ink-700: #3a3a3a;
	--color-ink-500: #6b6b6b; /* 5,3:1 auf Weiß – kleinste erlaubte Textfarbe */

	--color-paper: #ffffff;

	--color-sand-100: #f6f1ec; /* „Mist“: Produktkacheln */
	--color-sand-200: #ececec; /* Trennlinien mobil */
	--color-sand-300: #e6d7c4; /* feine Linien */
	--color-sand-400: #e4d3bd; /* Galerie-Fläche */
	--color-sand-500: #dfcdb7; /* Sonnen-Trenner im Footer */

	--color-green-500: #729b79;
	--color-rose-500: #d58f96;

	--color-success-700: #2e6b3a;
	--color-error-700: #b42318;
	--color-info-700: #1f4e79;

	/* Musterfarben: das Muster ist ein Bild, die Akzente entstehen per Filter. */
	--pattern-filter-sand: none;
	--pattern-filter-green: hue-rotate(67deg) saturate(0.75) brightness(1.08);
	--pattern-filter-rose: hue-rotate(316deg) saturate(1.35) brightness(1.08);
	--pattern-filter-lavender: hue-rotate(200deg) saturate(1.1) brightness(1.02);

	/* ------------------------------------------------------------ Schriften */
	--font-family-display: "Pangolin", "Comic Neue", "Segoe Print", sans-serif;
	--font-family-body: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Font-Size-Skala (rem) – Kommentar = px bei 16px Root */
	--font-size-2xs: 0.75rem;   /* 12 */
	--font-size-xs: 0.875rem;   /* 14 */
	--font-size-sm: 1rem;       /* 16 */
	--font-size-md: 1.125rem;   /* 18 */
	--font-size-lg: 1.25rem;    /* 20 */
	--font-size-xl: 1.5rem;     /* 24 */
	--font-size-2xl: 1.625rem;  /* 26 */
	--font-size-3xl: 1.75rem;   /* 28 */
	--font-size-4xl: 2rem;      /* 32 */
	--font-size-5xl: 2.25rem;   /* 36 */
	--font-size-6xl: 2.5rem;    /* 40 */
	--font-size-7xl: 2.75rem;   /* 44 */
	--font-size-8xl: 3rem;      /* 48 */
	--font-size-9xl: 3.5rem;    /* 56 */
	--font-size-10xl: 4rem;     /* 64 */

	--letter-spacing-tight: -0.05em;
	--letter-spacing-snug: -0.02em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.04em;

	/* ------------------------------------------------------------- Abstände */
	--space-0: 0;
	--space-1: 0.25rem;   /* 4 */
	--space-2: 0.5rem;    /* 8 */
	--space-3: 0.75rem;   /* 12 */
	--space-4: 1rem;      /* 16 */
	--space-5: 1.25rem;   /* 20 */
	--space-6: 1.5rem;    /* 24 */
	--space-7: 1.875rem;  /* 30 */
	--space-8: 2rem;      /* 32 */
	--space-9: 2.5rem;    /* 40 */
	--space-10: 3rem;     /* 48 */
	--space-11: 4rem;     /* 64 */
	--space-12: 5rem;     /* 80 */
	--space-13: 6rem;     /* 96 */
	--space-14: 7.5rem;   /* 120 */
	--space-15: 10rem;    /* 160 */

	/* --------------------------------------------------------------- Layout */
	--size-container: 90rem;   /* 1440 */
	--size-measure: 48.125rem; /* 770 – Lesebreite */
	--size-narrow: 42rem;      /* 672 */
	--size-tap: 2.75rem;       /* 44 – Mindestgröße Touch-Ziel (WCAG 2.5.5) */

	/* ------------------------------------------------------- Rahmen & Radius */
	--border-width-thin: 0.0625rem;  /* 1 */
	--border-width-medium: 0.125rem; /* 2 */
	--border-width-thick: 0.1875rem; /* 3 */

	--radius-sm: 0.25rem;      /* 4 */
	--radius-md: 0.3125rem;    /* 5 – Buttons */
	--radius-lg: 0.625rem;     /* 10 – Bilder */
	--radius-full: 62.4375rem; /* Pille */

	/* ------------------------------------------------------------- Schatten */
	--shadow-header: 0 0.0625rem 0 rgb(17 17 17 / 0.05), 0 1.125rem 1.5rem -1.375rem rgb(17 17 17 / 0.25);
	--shadow-raised: 0 0.75rem 2rem -1rem rgb(17 17 17 / 0.3);

	/* ----------------------------------------------------------- Bewegung */
	--duration-instant: 120ms;
	--duration-fast: 180ms;
	--duration-base: 320ms;
	--duration-slow: 700ms;

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

	/* --------------------------------------------------------------- Ebenen */
	--z-base: 1;
	--z-raised: 10;
	--z-header: 100;
	--z-overlay: 200;
	--z-skip: 1000;
}