/**
 * DDigital Group — Design Tokens
 * Light corporate aesthetic — Swiss holding, precise grids, restrained accent
 */

/* ─── Self-hosted fonts (DSGVO-konform — kein Google CDN) ──── */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ─── Brand (deep corporate green — used sparingly) ──── */
	--ddg-brand:          #1CCA5B;
	--ddg-brand-hover:    #17a84a;
	--ddg-brand-light:    rgba(28, 202, 91, 0.08);

	/* ─── Backgrounds ───────────────────────────────────── */
	--ddg-bg:             #ffffff;
	--ddg-surface:        #f5f7f9;
	--ddg-surface-raised: #ffffff;
	--ddg-surface-hover:  #eef1f4;

	/* ─── Text ──────────────────────────────────────────── */
	--ddg-text:           #1f2937;
	--ddg-text-muted:     #4b5563;
	--ddg-text-subtle:    #9ca3af;
	--ddg-text-brand:     #1CCA5B;
	--ddg-text-heading:   #111827;
	--ddg-text-inverse:   #ffffff;

	/* ─── Borders (dark hairlines on light ground) ──────── */
	--ddg-border:         rgba(15, 23, 42, 0.10);
	--ddg-border-bright:  rgba(15, 23, 42, 0.18);
	--ddg-border-brand:   rgba(28, 202, 91, 0.30);
	--ddg-border-focus:   rgba(28, 202, 91, 0.50);

	/* ─── Typography ────────────────────────────────────── */
	--ddg-font-heading: 'Montserrat', system-ui, sans-serif;
	--ddg-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--ddg-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Fluid type scale */
	--ddg-text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
	--ddg-text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
	--ddg-text-base: clamp(1rem,     0.95rem + 0.25vw, 1.0625rem);
	--ddg-text-lg:   clamp(1.125rem, 1rem    + 0.5vw,  1.25rem);
	--ddg-text-xl:   clamp(1.25rem,  1.1rem  + 0.6vw,  1.5rem);
	--ddg-text-2xl:  clamp(1.5rem,   1.3rem  + 0.8vw,  2rem);
	--ddg-text-3xl:  clamp(1.875rem, 1.5rem  + 1.5vw,  2.75rem);
	--ddg-text-4xl:  clamp(2.25rem,  1.8rem  + 2vw,    3.5rem);
	--ddg-text-5xl:  clamp(2.75rem,  2rem    + 2.5vw,  4.5rem);

	/* Weights */
	--ddg-w-normal:    400;
	--ddg-w-medium:    500;
	--ddg-w-semibold:  600;
	--ddg-w-bold:      700;
	--ddg-w-extrabold: 800;

	/* Line heights */
	--ddg-lh-tight:   1.2;
	--ddg-lh-snug:    1.35;
	--ddg-lh-normal:  1.6;
	--ddg-lh-relaxed: 1.8;

	/* Tracking */
	--ddg-ls-tight:   -0.01em;
	--ddg-ls-normal:  0;
	--ddg-ls-wide:    0.04em;
	--ddg-ls-wider:   0.08em;
	--ddg-ls-widest:  0.10em;

	/* ─── Spacing (8px base) ────────────────────────────── */
	--ddg-sp-1:  0.25rem;
	--ddg-sp-2:  0.5rem;
	--ddg-sp-3:  0.75rem;
	--ddg-sp-4:  1rem;
	--ddg-sp-5:  1.25rem;
	--ddg-sp-6:  1.5rem;
	--ddg-sp-8:  2rem;
	--ddg-sp-10: 2.5rem;
	--ddg-sp-12: 3rem;
	--ddg-sp-16: 4rem;
	--ddg-sp-20: 5rem;
	--ddg-sp-24: 6rem;

	/* Section padding */
	--ddg-section-py:    clamp(4rem, 3rem + 5vw, 8rem);
	--ddg-section-py-sm: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	--ddg-section-py-lg: clamp(5rem, 4rem + 6vw, 10rem);

	/* ─── Border Radius (tighter, corporate) ────────────── */
	--ddg-r-sm:   2px;
	--ddg-r:      4px;
	--ddg-r-md:   6px;
	--ddg-r-lg:   8px;
	--ddg-r-xl:   10px;
	--ddg-r-2xl:  12px;
	--ddg-r-full: 9999px;

	/* ─── Shadows (light mode: soft, low-contrast) ──────── */
	--ddg-shadow-sm:        0 1px 2px rgba(15, 23, 42, 0.06);
	--ddg-shadow-md:        0 2px 8px rgba(15, 23, 42, 0.08);
	--ddg-shadow-lg:        0 8px 24px rgba(15, 23, 42, 0.10);
	--ddg-shadow-xl:        0 16px 40px rgba(15, 23, 42, 0.12);
	--ddg-shadow-card:      0 1px 3px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--ddg-border);
	--ddg-shadow-card-hover:0 4px 16px rgba(15, 23, 42, 0.10), 0 0 0 1px var(--ddg-border-bright);

	/* ─── Transitions ───────────────────────────────────── */
	--ddg-trans-fast:   150ms ease;
	--ddg-trans:        250ms ease;
	--ddg-trans-slow:   400ms ease;
	--ddg-trans-spring: 280ms cubic-bezier(0.22, 1, 0.36, 1);

	/* ─── Layout ────────────────────────────────────────── */
	--ddg-max-w:       1200px;
	--ddg-max-w-wide:  1400px;
	--ddg-max-w-prose: 720px;
	--ddg-pad:         clamp(1.25rem, 4vw, 2.5rem);

	/* ─── Z-index ───────────────────────────────────────── */
	--ddg-z-base:     1;
	--ddg-z-raised:   10;
	--ddg-z-sticky:   200;
	--ddg-z-fixed:    300;
	--ddg-z-modal:    400;
	--ddg-z-toast:    500;
}
