/**
 * IYDEX design tokens.
 *
 * Approved brand values are declared once, then exposed through semantic tokens.
 */

:root {
	--iydex-brand-blue-dark: #160B90;
	--iydex-brand-blue: #252DB7;
	--iydex-brand-green: #7FEB85;
	--iydex-brand-navy: #0B1B31;
	--iydex-brand-light-gray: #F0F2F1;
	--iydex-white: #FFFFFF;

	--iydex-font-en: "Manrope", "Segoe UI", Arial, sans-serif;
	--iydex-font-ar: "Alexandria", Tahoma, Arial, sans-serif;
	--iydex-font-en-fallback: "Segoe UI", Arial, sans-serif;
	--iydex-font-ar-fallback: Tahoma, Arial, sans-serif;
	--iydex-font-en-active: var(--iydex-font-en-fallback);
	--iydex-font-ar-active: var(--iydex-font-ar-fallback);

	--iydex-font-size-display: clamp(2.75rem, 5vw, 4.75rem);
	--iydex-font-size-h1: clamp(2.25rem, 4vw, 3.75rem);
	--iydex-font-size-h2: clamp(1.875rem, 3vw, 3rem);
	--iydex-font-size-h3: clamp(1.5rem, 2.2vw, 2.25rem);
	--iydex-font-size-h4: clamp(1.25rem, 1.5vw, 1.625rem);
	--iydex-font-size-body-lg: clamp(1.0625rem, 1.1vw, 1.25rem);
	--iydex-font-size-body: clamp(1rem, 0.4vw, 1.0625rem);
	--iydex-font-size-body-sm: clamp(0.875rem, 0.25vw, 0.9375rem);
	--iydex-font-size-caption: clamp(0.75rem, 0.2vw, 0.8125rem);

	--iydex-line-height-en-tight: 1.12;
	--iydex-line-height-en-heading: 1.18;
	--iydex-line-height-en-body: 1.65;
	--iydex-line-height-ar-tight: 1.28;
	--iydex-line-height-ar-heading: 1.38;
	--iydex-line-height-ar-body: 1.9;
	--iydex-line-height-caption: 1.45;

	--iydex-color-background: var(--iydex-white);
	--iydex-color-background-alt: var(--iydex-brand-light-gray);
	--iydex-color-surface: var(--iydex-white);
	--iydex-color-surface-alt: var(--iydex-color-background-alt);
	--iydex-color-surface-dark: var(--iydex-brand-navy);
	--iydex-color-surface-primary: var(--iydex-brand-blue-dark);
	--iydex-color-primary: var(--iydex-brand-blue-dark);
	--iydex-color-primary-hover: var(--iydex-brand-blue);
	--iydex-color-primary-active: var(--iydex-brand-navy);
	--iydex-color-heading: var(--iydex-brand-navy);
	--iydex-color-body: #334155;
	--iydex-color-muted: #64748B;
	--iydex-color-link: var(--iydex-color-primary);
	--iydex-color-link-hover: var(--iydex-color-primary-hover);
	--iydex-color-action: var(--iydex-color-primary);
	--iydex-color-action-hover: var(--iydex-color-primary-hover);
	--iydex-color-action-active: var(--iydex-color-primary-active);
	--iydex-color-accent: var(--iydex-brand-green);
	--iydex-color-on-dark: var(--iydex-white);
	--iydex-color-on-primary: var(--iydex-white);
	--iydex-color-on-accent: var(--iydex-brand-navy);
	--iydex-color-border: #D8DEDC;
	--iydex-color-border-strong: #BCC5C2;
	--iydex-color-focus: var(--iydex-brand-blue-dark);
	--iydex-color-focus-ring: rgba(127, 235, 133, 0.35);
	--iydex-color-success: #168447;
	--iydex-color-success-surface: color-mix(in srgb, var(--iydex-color-success) 12%, var(--iydex-white));
	--iydex-color-warning: #B86600;
	--iydex-color-warning-surface: color-mix(in srgb, var(--iydex-color-warning) 18%, var(--iydex-white));
	--iydex-color-error: #B42318;
	--iydex-color-error-surface: color-mix(in srgb, var(--iydex-color-error) 10%, var(--iydex-white));
	--iydex-color-info: var(--iydex-brand-blue);
	--iydex-color-info-surface: color-mix(in srgb, var(--iydex-brand-blue) 10%, var(--iydex-white));
	--iydex-color-overlay: rgba(11, 27, 49, 0.72);

	--iydex-space-2xs: 0.5rem;
	--iydex-space-xs: 0.75rem;
	--iydex-space-sm: 1rem;
	--iydex-space-md: 1.5rem;
	--iydex-space-lg: 2rem;
	--iydex-space-xl: 3rem;
	--iydex-space-2xl: 4.5rem;
	--iydex-space-3xl: 6rem;

	--iydex-radius-xs: 2px;
	--iydex-radius-sm: 4px;
	--iydex-radius-md: 8px;
	--iydex-border-width: 1px;
	--iydex-shadow-sm: 0 8px 24px color-mix(in srgb, var(--iydex-brand-navy) 8%, transparent);
	--iydex-shadow-md: 0 16px 44px color-mix(in srgb, var(--iydex-brand-navy) 12%, transparent);

	--iydex-container: 1160px;
	--iydex-container-wide: 1360px;
	--iydex-container-reading: 760px;

	--iydex-transition-fast: 160ms ease;
}