/**
 * citelayer Design System — CSS Custom Properties (Design Tokens)
 * Angepasst für WordPress Block Theme mit Bunny Fonts (Inter).
 *
 * Änderung gegenüber Original: 'Google Sans' → 'Inter' (Bunny Fonts, DSGVO-konform)
 * Import-Reihenfolge: variables.css → base.css → components.css → layouts.css → templates.css
 */

:root {

	/* ============================================================
	   FARBEN — Brand Palette
	   ============================================================ */

	/* Orange — Akzent, Stat-Werte, Add-on Preise */
	--cl-orange:        #E19054;
	--cl-orange-bright: #FFB787;
	--cl-orange-dim:    #8C4A1F;

	/* Purple/Prism — CTAs, Links, Badges, Featured States */
	--cl-prism-1: #6750A4;   /* Primary Purple */
	--cl-prism-2: #9A80D9;   /* Light Purple */
	--cl-prism-3: #CCC2DC;   /* Muted Lavender */

	/* Backgrounds */
	--cl-bg:        #FFFFFF;   /* Standard */
	--cl-bg-alt:    #FAFAFA;   /* Sections, Stats-Bg, Footer */
	--cl-bg-warm:   #FDF8F4;   /* Add-on Cards, Warm Highlights */
	--cl-bg-purple: #F8F5FF;   /* Featured Cards, Purple Tint */

	/* Text */
	--cl-text:           #1C1B1F;
	--cl-text-secondary: #49454F;
	--cl-text-tertiary:  #6B7280;

	/* Borders */
	--cl-border:       rgba(0, 0, 0, 0.08);
	--cl-border-hover: rgba(0, 0, 0, 0.14);

	/* Shadows */
	--cl-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
	--cl-shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
	--cl-shadow-lg: 0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
	--cl-shadow-xl: 0 24px 64px rgba(0,0,0,.10), 0 8px 20px rgba(0,0,0,.06);

	/* Glows */
	--cl-glow-purple: 0 0 40px rgba(103, 80, 164, 0.15);
	--cl-glow-orange: 0 0 40px rgba(225, 144, 84, 0.15);

	/* ============================================================
	   TYPOGRAFIE — Inter via Bunny Fonts (DSGVO-konform)
	   ============================================================ */

	--font-display: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--font-body:    'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', ui-monospace, monospace;

	/* Fluid Font Sizes */
	--text-xs:   0.75rem;     /* 12px */
	--text-sm:   0.8125rem;   /* 13px */
	--text-base: 0.9375rem;   /* 15px */
	--text-md:   1rem;        /* 16px */
	--text-lg:   1.0625rem;   /* 17px */
	--text-xl:   1.125rem;    /* 18px */
	--text-2xl:  1.25rem;     /* 20px */
	--text-3xl:  1.375rem;    /* 22px */

	/* Fluid Heading Sizes */
	--heading-sm:  clamp(1.5rem, 3vw, 2rem);
	--heading-md:  clamp(1.75rem, 3.5vw, 2.75rem);
	--heading-lg:  clamp(2rem, 4vw, 3rem);
	--heading-xl:  clamp(2.5rem, 6vw, 4.5rem);

	/* Font Weights */
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;

	/* Line Heights */
	--leading-tight:   1.08;
	--leading-snug:    1.15;
	--leading-normal:  1.55;
	--leading-relaxed: 1.7;
	--leading-loose:   1.8;

	/* Letter Spacing */
	--tracking-tighter: -0.04em;
	--tracking-tight:   -0.03em;
	--tracking-snug:    -0.02em;
	--tracking-normal:  0;
	--tracking-wide:    0.03em;
	--tracking-wider:   0.05em;

	/* ============================================================
	   SPACING
	   ============================================================ */

	--space-1:  0.25rem;    /*  4px */
	--space-2:  0.375rem;   /*  6px */
	--space-3:  0.5rem;     /*  8px */
	--space-4:  0.75rem;    /* 12px */
	--space-5:  1rem;       /* 16px */
	--space-6:  1.25rem;    /* 20px */
	--space-7:  1.5rem;     /* 24px */
	--space-8:  2rem;       /* 32px */
	--space-9:  2.5rem;     /* 40px */
	--space-10: 3rem;       /* 48px */
	--space-11: 3.5rem;     /* 56px */
	--space-12: 4rem;       /* 64px */

	/* Layout */
	--section-py:    clamp(4rem, 8vw, 7rem);
	--container-max: 1200px;
	--container-px:  clamp(1.25rem, 4vw, 2rem);

	/* ============================================================
	   BORDER RADIUS
	   ============================================================ */

	--radius-xs:   4px;
	--radius-sm:   8px;
	--radius-md:   12px;
	--radius-lg:   20px;
	--radius-xl:   28px;
	--radius-full: 100px;

	/* ============================================================
	   ANIMATION
	   ============================================================ */

	--ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);

	--duration-fast:   0.2s;
	--duration-normal: 0.3s;
	--duration-medium: 0.5s;
	--duration-slow:   0.8s;

	/* ============================================================
	   GRADIENTS
	   ============================================================ */

	--gradient-brand:       linear-gradient(135deg, var(--cl-prism-1) 0%, var(--cl-prism-2) 50%, var(--cl-orange) 100%);
	--gradient-brand-horiz: linear-gradient(90deg, var(--cl-prism-1), var(--cl-prism-2), var(--cl-orange));
	--gradient-cta:         linear-gradient(135deg, var(--cl-prism-1) 0%, var(--cl-orange) 100%);
	--gradient-warm:        linear-gradient(135deg, #F8F5FF 0%, #FDF8F4 100%);
	--gradient-divider:     linear-gradient(90deg, transparent 0%, var(--cl-border) 20%, var(--cl-border) 80%, transparent 100%);

	/* ============================================================
	   Z-INDEX
	   ============================================================ */

	--z-base:     0;
	--z-raised:   1;
	--z-dropdown: 100;
	--z-sticky:   900;
	--z-nav:      1000;
	--z-modal:    1050;
	--z-progress: 1100;
}

:root :where(.is-layout-flow) > * {
    margin-block-start: 0;
}