/**
 * Ozobot Benelux design tokens.
 * Components consume semantic tokens; raw brand colors are for accents.
 */

:root {
	/* Brand palette. */
	--oz-brand-purple: #4f34e2;
	--oz-brand-blue: #334fb4;
	--oz-brand-green: #a3f0c6;
	--oz-brand-yellow: #ffd84d;
	--oz-brand-red: #ef476f;

	/* Semantic colors. */
	--oz-color-primary: var(--oz-brand-purple);
	--oz-color-primary-hover: #3c26b8;
	--oz-color-primary-active: #2f1d95;
	--oz-color-on-primary: #ffffff;
	--oz-color-secondary: #161617;
	--oz-color-secondary-hover: #2c2c30;
	--oz-color-secondary-active: #080809;
	--oz-color-on-secondary: #ffffff;
	--oz-color-dark: #161617;
	--oz-color-ink: var(--oz-color-dark);
	--oz-color-accent: var(--oz-brand-green);
	--oz-color-on-accent: #161617;
	--oz-color-text: #242631;
	--oz-color-text-muted: #626879;
	--oz-color-heading: #161617;
	--oz-color-white: #ffffff;
	--oz-color-background: #ffffff;
	--oz-color-surface: #f5f5f7;
	--oz-color-surface-strong: #e9ebf2;
	--oz-color-border: #d8dce6;
	--oz-color-link: #4027c7;
	--oz-color-link-hover: #2f1d95;
	--oz-color-focus: #0b63ce;
	--oz-color-success: #147a4b;
	--oz-color-success-surface: #e7f8ef;
	--oz-color-warning: #7a5000;
	--oz-color-warning-surface: #fff4d6;
	--oz-color-error: #b42318;
	--oz-color-error-surface: #feeceb;

	/* Lato may be supplied by Elementor; local fallbacks are always available. */
	--oz-font-family-heading: "Lato", "Avenir Next", "Segoe UI", Arial, sans-serif;
	--oz-font-family-body: "Lato", "Avenir Next", "Segoe UI", Arial, sans-serif;
	--oz-font-weight-regular: 400;
	--oz-font-weight-medium: 500;
	--oz-font-weight-semibold: 600;
	--oz-font-weight-bold: 700;
	--oz-font-weight-black: 900;
	--oz-line-height-heading: 1.08;
	--oz-line-height-body: 1.6;

	/* Fluid type scale. */
	--oz-font-size-display: clamp(3rem, 2.25rem + 3.75vw, 6rem);
	--oz-font-size-h1: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
	--oz-font-size-h2: clamp(2rem, 1.65rem + 1.75vw, 3.5rem);
	--oz-font-size-h3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
	--oz-font-size-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--oz-font-size-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--oz-font-size-body: 1rem;
	--oz-font-size-small: 0.875rem;
	--oz-font-size-eyebrow: 0.8125rem;

	/* Spacing scale. */
	--oz-space-2xs: 0.25rem;
	--oz-space-xs: 0.5rem;
	--oz-space-sm: 0.75rem;
	--oz-space-md: 1rem;
	--oz-space-lg: 1.5rem;
	--oz-space-xl: 2rem;
	--oz-space-2xl: 3rem;
	--oz-space-3xl: clamp(4rem, 6vw, 6rem);
	--oz-space-4xl: clamp(5rem, 8vw, 8rem);
	/* External flow gaps. Never use these as component padding. */
	--oz-section-spacing: clamp(3rem, calc(0.5rem + 6.25vw), 5.5rem);
	--oz-section-spacing-compact: clamp(2rem, 4vw, 3rem);
	--oz-section-spacing-large: clamp(4rem, 8vw, 7rem);
	--oz-space-page-intro: clamp(1rem, 2.5vw, 2rem);
	/* Interior padding for existing full-bleed surfaces, independent of flow. */
	--oz-section-padding: clamp(4rem, 8vw, 7rem);
	--oz-section-padding-compact: clamp(3rem, 6vw, 5rem);
	--oz-container-padding: clamp(1rem, 0.75rem + 1.25vw, 2rem);
	--oz-card-padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	--oz-content-gap: var(--oz-space-lg);
	--oz-grid-gap: clamp(1rem, 0.75rem + 1.25vw, 2rem);

	/* Layout widths. */
	--oz-container-narrow: 45rem;
	--oz-container-normal: 75rem;
	--oz-container-wide: 90rem;

	/* Shape and elevation. */
	--oz-radius-small: 0.375rem;
	--oz-radius-medium: 0.75rem;
	--oz-radius-large: 1.25rem;
	--oz-radius-media: var(--oz-radius-large);
	--oz-radius-xl: 2rem;
	--oz-radius-pill: 999px;
	--oz-form-radius: var(--oz-radius-medium);
	--oz-shadow-subtle: 0 1px 2px rgb(22 22 23 / 8%);
	--oz-shadow-card: 0 10px 30px rgb(22 22 23 / 10%);
	--oz-shadow-elevated: 0 20px 50px rgb(22 22 23 / 16%);

	/* Interaction. */
	--oz-control-min-height: 2.75rem;
	--oz-focus-ring: 0 0 0 3px rgb(11 99 206 / 28%);
}

/* Semantic accent families. Strong tones are contrast-adjusted Benelux UI colors;
   soft tones are surfaces, always paired with ink. See docs/semantic-colors.md. */
:root {
 --oz-brand-orange: #ff9900;
 --oz-color-education: #146447;
 --oz-color-education-soft: #e5f8ee;
 --oz-color-primary-education: #9d285f;
 --oz-color-primary-education-soft: #fcebf3;
 --oz-color-secondary-education: var(--oz-brand-blue);
 --oz-color-secondary-education-soft: #eaf0fc;
 --oz-color-evo: #a44900;
 --oz-color-evo-soft: #fff1e3;
 --oz-color-bit: #08665f;
 --oz-color-bit-soft: #e5f5f1;
 --oz-color-ari: var(--oz-brand-purple);
 --oz-color-ari-soft: #f0ebff;
 --oz-color-digital-literacy: #006880;
 --oz-color-digital-literacy-soft: #e7f6fa;
 --oz-color-computational-thinking: #5140a3;
 --oz-color-computational-thinking-soft: #efedfb;
 --oz-color-steam: #925000;
 --oz-color-steam-soft: #fff4d7;
 --oz-color-colorcodes: var(--oz-color-text);
 --oz-color-colorcodes-soft: var(--oz-color-surface);
 --oz-color-blockly: var(--oz-brand-blue);
 --oz-color-blockly-soft: #eaf0fc;
 --oz-color-python: #254779;
 --oz-color-python-soft: #edf2fa;
 --oz-color-code-black: #161617;
 --oz-color-code-red: #c73336;
 --oz-color-code-green: #16834a;
 --oz-color-code-blue: #235fb5;
}

:root { --oz-color-support: var(--oz-color-python); --oz-color-support-soft: var(--oz-color-surface); }

/* Shared editorial roles, extracted from the established content-page scale. */
:root {
 --oz-font-size-editorial-h2: clamp(1.75rem,1.25rem + 1.4vw,2.65rem);
 --oz-font-size-editorial-h3: 1.25rem;
 --oz-font-size-route-title: clamp(1.375rem,1.1rem + .7vw,1.875rem);
 --oz-font-size-section-label: .75rem;
 --oz-font-weight-editorial: var(--oz-font-weight-semibold);
 --oz-line-height-editorial-heading: 1.25;
 --oz-line-height-editorial-body: 1.7;
}

/* Site chrome layers. Native dialogs use the browser top layer above all of these. */
:root { --oz-layer-header:900; --oz-layer-drawer-backdrop:990; --oz-layer-drawer:1000; }