/**
 * INAI Design Tokens — extracted from Figma
 * File: INAI Web Design System | Node: Startseite (1036:1129)
 * Artboard: 1440 × 12315 | Content width: 1200 | Side inset: 120
 */

:root {
	/* —— Colors —— */
	--inai-deep-blue: #173393;
	--inai-electric-blue: #2d5bff;
	--inai-blau: #2d5bff;
	--inai-soft-grey: #f1f1f2;
	--inai-white: #ffffff;
	--inai-black: #000000;
	--inai-gruen: #4a8c3c;
	--inai-signal-rot: #f12f32;

	/* Hero / page top gradient (Figma 1036:1134) */
	--inai-hero-gradient: linear-gradient(
		180deg,
		rgb(5, 21, 79) 0%,
		rgb(12, 33, 106) 8.0539%,
		rgba(23, 51, 147, 0.95) 14.399%,
		rgba(255, 255, 255, 0.75) 40.024%,
		rgb(255, 255, 255) 50.761%
	);

	/* —— Typography families —— */
	--inai-font-display: "Bricolage Grotesque", sans-serif;
	--inai-font-body: "DM Sans", sans-serif;

	/* —— Type scale (exact Figma) —— */
	/* Navigation Label */
	--inai-nav-size: 16px;
	--inai-nav-lh: 24px;
	--inai-nav-weight: 600;

	/* Body / Standard Text */
	--inai-body-size: 16px;
	--inai-body-lh: 24px;
	--inai-body-weight: 500;

	/* Page Navigation / Small Text — letterSpacing 15% of 12px = 1.8px */
	--inai-small-size: 12px;
	--inai-small-lh: 16px;
	--inai-small-weight: 600;
	--inai-small-tracking: 1.8px;

	/* H1 / Hero Headline */
	--inai-h1-size: 48px;
	--inai-h1-lh: 58px;
	--inai-h1-weight: 600;

	/* H2 / Section Headline */
	--inai-h2-size: 40px;
	--inai-h2-lh: 48px;
	--inai-h2-weight: 600;

	/* Card / service title */
	--inai-h3-size: 24px;
	--inai-h3-lh: 31px;
	--inai-h3-weight: 600;

	/* —— Layout —— */
	--inai-page-max: 1440px;
	--inai-content-width: 1200px;
	--inai-side-gutter: 120px;
	--inai-section-gap: 120px;

	/* —— Radii —— */
	--inai-radius-pill: 999px;
	--inai-radius-nav: 24px;
	--inai-radius-card: 24px;
	--inai-radius-card-sm: 16px;
	--inai-radius-input: 12px;
	--inai-radius-media: 16px;
	--inai-radius-media-sm: 8px;

	/* —— Shadows (Figma Button / Primary drop shadow) —— */
	--inai-shadow-btn: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
	--inai-shadow-card: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);

	/* —— Buttons (Figma 02 Components: Primary 51:801, Secondary 349:226, Service 51:892) —— */
	--inai-btn-h-primary: 45px;
	--inai-btn-h-secondary: 48px;
	--inai-btn-px: 24px;
	--inai-btn-py: 14px;
	--inai-btn-transition: 0.3s ease-in-out;
	/* Primary default: linear #2D5BFF → #173393 (~45°). Hover: #173393 → #000. */
	--inai-btn-primary-gradient: linear-gradient(135deg, #2d5bff 0%, #173393 100%);
	--inai-btn-primary-gradient-hover: linear-gradient(135deg, #173393 0%, #000000 100%);
	--inai-btn-primary-color: var(--inai-white);
	--inai-btn-primary-color-hover: var(--inai-white);
	/* Secondary: solid white + electric text → white @ 10% + white text (dark surfaces). */
	--inai-btn-secondary-bg: var(--inai-white);
	--inai-btn-secondary-color: var(--inai-electric-blue);
	--inai-btn-secondary-bg-hover: rgba(255, 255, 255, 0.1);
	--inai-btn-secondary-color-hover: var(--inai-white);
	/* Service Cards CTA: solid electric → white fill + 1px electric stroke + electric text. */
	--inai-btn-accent-bg: var(--inai-electric-blue);
	--inai-btn-accent-color: var(--inai-white);
	--inai-btn-accent-bg-hover: var(--inai-white);
	--inai-btn-accent-color-hover: var(--inai-electric-blue);
	--inai-btn-accent-border-hover: var(--inai-electric-blue);

	/* —— Navigation —— */
	--inai-nav-height: 77px;
	--inai-nav-px: 32px;
	--inai-nav-py: 16px;
	--inai-nav-logo-w: 96px;
	--inai-nav-logo-h: 30px;
	--inai-nav-items-w: 520px;

	/* —— Cards —— */
	--inai-service-card-w: 384px;
	--inai-service-card-p: 32px;
	--inai-service-card-bg: rgba(241, 241, 242, 0.8);
	--inai-icon-w: 85px;
	--inai-icon-h: 70px;
}