/* Global tokens: the only place raw values live. Values come from the Ockto Foundation
   library (Figma "Foundation", the same set exported into noodfonds' tne-tokens.css). */
:root {
	/* Neutral ramp (light -> dark) */
	--global-color-base-0: #ffffff;
	--global-color-base-1: #f6f7f8;
	--global-color-base-2: #f5f6fb;
	--global-color-base-3: #ecedf6;
	--global-color-base-4: #e6e8eb;
	--global-color-base-5: #dbdee2;
	--global-color-base-6: #c2c8ce;
	--global-color-base-7: #8e95a3;
	--global-color-base-8: #5e626f;
	--global-color-base-9: #323439;
	--global-color-base-10: #1e1f48;

	/* Indigo (action) ramp, 3 = Action-color */
	--global-color-indigo-1: #9e9fe4;
	--global-color-indigo-2: #6b76e9;
	--global-color-indigo-3: #36369d;
	--global-color-indigo-4: #33367c;
	--global-color-indigo-5: #1e1f48;

	/* Brand ramp (orange) */
	--global-color-orange-1: #fdf0e9;
	--global-color-orange-2: #f08b47;
	--global-color-orange-3: #ec6e26;
	--global-color-orange-4: #dd5319;
	--global-color-orange-5: #92321a;

	/* Green (success) */
	--global-color-green-1: #daf1e4;
	--global-color-green-3: #226f54;
	--global-color-green-5: #194c3c;

	/* Red (danger) */
	--global-color-red-1: #ffe4e9;
	--global-color-red-2: #f24172;
	--global-color-red-3: #d81e5b;
	--global-color-red-5: #9e1349;

	/* Chart hues: validated categorical order and single-hue ordinal ramp */
	--global-color-chart-indigo: #4a4ad8;
	--global-color-chart-orange: #ec6e26;
	--global-color-chart-teal: #1a9a9a;
	--global-color-chart-violet: #b94bd0;
	--global-color-chart-ordinal-1: #9e9fe4;
	--global-color-chart-ordinal-2: #7f80d5;
	--global-color-chart-ordinal-3: #6364c6;
	--global-color-chart-ordinal-4: #4b4bb6;
	--global-color-chart-ordinal-5: #36369d;
	--global-color-chart-ordinal-6: #27277a;

	--global-color-opacity-6: 0.06;
	--global-color-opacity-10: 0.1;
	--global-color-opacity-75: 0.75;

	/* Sizes (px-named, rem-valued) */
	--global-size-unit-1: 0.0625rem;
	--global-size-unit-2: 0.125rem;
	--global-size-unit-4: 0.25rem;
	--global-size-unit-8: 0.5rem;
	--global-size-unit-12: 0.75rem;
	--global-size-unit-16: 1rem;
	--global-size-unit-24: 1.5rem;
	--global-size-unit-32: 2rem;
	--global-size-unit-48: 3rem;
	--global-size-unit-64: 4rem;

	--global-radius-4: 0.25rem;
	--global-radius-8: 0.5rem;
	--global-radius-12: 0.75rem;
	--global-radius-16: 1rem;
	--global-radius-24: 1.5rem;
	--global-radius-full: 999px;

	/* Typography */
	--global-font-family-sans: 'Poppins', system-ui, sans-serif;
	--global-font-size-12: 0.75rem;
	--global-font-size-14: 0.875rem;
	--global-font-size-16: 1rem;
	--global-font-size-18: 1.125rem;
	--global-font-size-24: 1.5rem;
	--global-font-size-30: 1.875rem;
	--global-font-size-40: 2.5rem;
	--global-font-size-48: 3rem;
	--global-font-size-64: 4rem;
	--global-font-weight-regular: 400;
	--global-font-weight-bold: 600;
	--global-line-height-title: 1.2;
	--global-line-height-text: 1.5;
	--global-line-height-label: 1.4;
	--global-letter-spacing-label: 0.04em;

	/* Shadows */
	--global-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--global-shadow-2: 0 2px 4px -2px rgb(0 0 0 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.1);
	--global-shadow-3: 0 8px 10px -6px rgb(0 0 0 / 0.1), 0 20px 25px -5px rgb(0 0 0 / 0.1);

	/* Motion */
	--global-motion-duration-fast: 150ms;
	--global-motion-duration-normal: 320ms;
	--global-motion-duration-slow: 720ms;
	--global-motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
	--global-motion-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	/* Z-index */
	--global-z-sticky: 10;
	--global-z-overlay: 20;
}