/* =============================================================
   KirkeTjek — Design Tokens
   Central source of truth for colours, type, spacing, shadows.
   Brand colours are derived from the live KirkeTjek system theme.
   ============================================================= */

:root {
	/* ---- Brand palette ---- */
	--kt-primary:            #6c5488; /* core brand purple */
	--kt-primary-strong:     #533c6e; /* darker purple for hover / depth */
	--kt-primary-bright:     #8b72a8; /* lighter brand purple (logo accent) */
	--kt-primary-container:  #eedbff; /* soft tint background */
	--kt-on-primary:         #ffffff;
	--kt-on-primary-container: #260f40;

	--kt-accent:             #874c66; /* tertiary / rose for highlights */
	--kt-accent-container:   #ffd8e6;

	/* ---- Status colours (mirror the registration grid) ---- */
	--kt-status-present:     #2e9e5b; /* Til stede  */
	--kt-status-sick:        #e3b008; /* Syg        */
	--kt-status-noshow:      #d33a3a; /* Trækkes    */
	--kt-status-substitute:  #3a73d3; /* Vikar      */
	--kt-status-leave:       #e08a2b; /* Orlov      */

	/* ---- Neutrals / surfaces ---- */
	--kt-bg:                 #fdf8f8;
	--kt-surface:            #ffffff;
	--kt-surface-2:          #f5f1f6;
	--kt-surface-3:          #ece6f0;
	--kt-ink:                #1c1b1c; /* primary text */
	--kt-ink-soft:           #49464b; /* secondary text */
	--kt-ink-faint:          #7a767b; /* tertiary text */
	--kt-line:               #e4dde9; /* hairline borders */
	--kt-line-strong:        #cbc5cb;

	/* ---- Dark section (footer / contrast bands) ---- */
	--kt-dark:               #241934;
	--kt-dark-2:             #2e2142;
	--kt-on-dark:            #f4f0ef;
	--kt-on-dark-soft:       #c8bcd8;

	/* ---- Typography ---- */
	--kt-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--kt-fs-300: 0.875rem;  /* 14 */
	--kt-fs-400: 1rem;      /* 16 */
	--kt-fs-500: 1.125rem;  /* 18 */
	--kt-fs-600: 1.375rem;  /* 22 */
	--kt-fs-700: 1.75rem;   /* 28 */
	--kt-fs-800: 2.25rem;   /* 36 */
	--kt-fs-900: clamp(2.5rem, 5vw + 1rem, 4rem); /* fluid display */

	--kt-lh-tight: 1.12;
	--kt-lh-snug:  1.3;
	--kt-lh-base:  1.65;

	/* ---- Spacing scale ---- */
	--kt-space-1: 0.25rem;
	--kt-space-2: 0.5rem;
	--kt-space-3: 0.75rem;
	--kt-space-4: 1rem;
	--kt-space-5: 1.5rem;
	--kt-space-6: 2rem;
	--kt-space-7: 3rem;
	--kt-space-8: 4rem;
	--kt-space-9: 6rem;
	--kt-space-10: 8rem;

	/* ---- Radius ---- */
	--kt-radius-sm: 8px;
	--kt-radius-md: 14px;
	--kt-radius-lg: 22px;
	--kt-radius-xl: 32px;
	--kt-radius-pill: 999px;

	/* ---- Shadows ---- */
	--kt-shadow-sm: 0 1px 2px rgba(38, 15, 64, 0.06), 0 2px 6px rgba(38, 15, 64, 0.05);
	--kt-shadow-md: 0 8px 24px rgba(38, 15, 64, 0.10), 0 2px 8px rgba(38, 15, 64, 0.06);
	--kt-shadow-lg: 0 24px 60px rgba(38, 15, 64, 0.16), 0 8px 20px rgba(38, 15, 64, 0.08);
	--kt-shadow-primary: 0 14px 34px rgba(108, 84, 136, 0.32);

	/* ---- Layout ---- */
	--kt-container: 1180px;
	--kt-container-narrow: 820px;
	--kt-header-h: 72px;

	/* ---- Motion (tuned for upcoming scroll animations) ---- */
	--kt-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--kt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--kt-dur-fast: 180ms;
	--kt-dur-base: 320ms;
	--kt-dur-slow: 720ms;
}