/**
 * Head and Code Core — Globale Designtoken
 *
 * Diese Custom Properties dienen als Basis für alle HC-Projekte.
 * Projektspezifische Werte werden im Child-Theme überschrieben.
 *
 * @package HeadAndCode\Core
 */

:root {
	/* ── Projektfarben (werden im Child-Theme überschrieben) ──────────────── */
	--hc-color-primary:       #1a2744; /* Navy */
	--hc-color-primary-dark:  #111b30;
	--hc-color-primary-light: #2d3f6b;

	--hc-color-accent:        #c5973a; /* Gold */
	--hc-color-accent-dark:   #a87e2e;
	--hc-color-accent-light:  #d4aa58;

	--hc-color-white:         #ffffff;
	--hc-color-black:         #0d0d0d;

	--hc-color-bg:            #f8f7f4;
	--hc-color-bg-dark:       #1a1a1a;

	--hc-color-text:          #1a2744;
	--hc-color-text-muted:    #5f6b84;

	/* ── Typografie ───────────────────────────────────────────────────────── */
	--hc-font-primary:  'Inter', system-ui, -apple-system, sans-serif;
	--hc-font-heading:  'Inter', system-ui, -apple-system, sans-serif;
	--hc-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

	--hc-font-size-xs:  0.75rem;   /*  12px */
	--hc-font-size-sm:  0.875rem;  /*  14px */
	--hc-font-size-md:  1rem;      /*  16px */
	--hc-font-size-lg:  1.125rem;  /*  18px */
	--hc-font-size-xl:  1.25rem;   /*  20px */
	--hc-font-size-2xl: 1.5rem;    /*  24px */
	--hc-font-size-3xl: 2rem;      /*  32px */
	--hc-font-size-4xl: 2.5rem;    /*  40px */
	--hc-font-size-5xl: 3rem;      /*  48px */

	--hc-line-height-tight:  1.2;
	--hc-line-height-normal: 1.6;
	--hc-line-height-loose:  1.8;

	--hc-font-weight-normal:  400;
	--hc-font-weight-medium:  500;
	--hc-font-weight-bold:    700;

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

	/* ── Layout ───────────────────────────────────────────────────────────── */
	--hc-max-width:        1280px;
	--hc-max-width-narrow: 768px;
	--hc-container-pad:    var(--hc-space-6);

	/* ── Border Radius ────────────────────────────────────────────────────── */
	--hc-radius-sm:   4px;
	--hc-radius-md:   8px;
	--hc-radius-lg:   16px;
	--hc-radius-xl:   24px;
	--hc-radius-full: 9999px;

	/* ── Schatten ─────────────────────────────────────────────────────────── */
	--hc-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
	--hc-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
	--hc-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);

	/* ── Transitionen ─────────────────────────────────────────────────────── */
	--hc-transition-fast:   150ms ease;
	--hc-transition-normal: 250ms ease;
	--hc-transition-slow:   400ms ease;

	/* ── Z-Index-Skala ────────────────────────────────────────────────────── */
	--hc-z-base:    1;
	--hc-z-overlay: 100;
	--hc-z-modal:   200;
	--hc-z-toast:   300;
	--hc-z-header:  400;

	/* ── Navigation / Header ──────────────────────────────────────────────── */
	--hc-header-height: 80px;
}

/* ── Utility-Klassen ────────────────────────────────────────────────────────── */

.hc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hc-container {
	width: 100%;
	max-width: var(--hc-max-width);
	margin-inline: auto;
	padding-inline: var(--hc-container-pad);
}

/* Scroll-Lock (per JS-Klasse am body gesetzt) */
body.hc-scroll-locked {
	overflow: hidden;
}