/**
 * SYRTEL GROUP — Design tokens (UIX 10.1)
 * Dirección visual: Ingeniería de integración.
 * HEX = propuesta visual de fase, no identidad corporativa oficial.
 *
 * IBM Plex Sans pendiente de archivo local (woff2). No hay @font-face.
 * Fallback: system-ui / Segoe UI. No se usa Google Fonts CDN.
 */

:root {
	/* Palette — UIX 10.1 proposal */
	--ds-color-primary: #0B2A5B;
	--ds-color-primary-dark: #081A3D;
	--ds-color-primary-light: #1a4a8c;
	--ds-color-accent: #0056D2;
	--ds-color-accent-hover: #0047B0;
	--ds-color-accent-active: #003a91;

	--ds-color-neutral-dark: #121820;
	--ds-color-neutral: #5C6570;
	--ds-color-neutral-light: #E8EEF4;
	--ds-color-background: #F4F6F9;
	--ds-color-surface: #FFFFFF;
	--ds-color-white: #FFFFFF;
	--ds-color-border: #D5DEE8;
	--ds-color-border-strong: #b7c3d1;

	--ds-color-text: #121820;
	--ds-color-text-muted: #5C6570;
	--ds-color-text-on-dark: #F5F7FA;
	--ds-color-text-on-accent: #FFFFFF;

	--ds-color-success: #1F7A4D;
	--ds-color-warning: #b36b12;
	--ds-color-error: #B42318;
	--ds-color-info: #0056D2;

	--ds-color-hover: #0047B0;
	--ds-color-active: #003a91;
	--ds-color-focus: #0056D2;
	--ds-color-disabled: #9aa6b4;
	--ds-color-disabled-bg: #E8EEF4;

	/* Climate planes — solid navy, not a universal gradient language */
	--ds-gradient-tech: #081A3D;
	--ds-gradient-tech-soft: #081A3D;

	--ds-font-body: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ds-font-heading: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ds-font-weight-regular: 400;
	--ds-font-weight-medium: 500;
	--ds-font-weight-semibold: 600;
	--ds-font-weight-bold: 700;

	--ds-text-display: clamp(2.5rem, 5vw, 3.25rem);
	--ds-text-h1: clamp(2rem, 4vw, 2.5rem);
	--ds-text-h2: clamp(1.5rem, 3vw, 1.85rem);
	--ds-text-h3: 1.25rem;
	--ds-text-h4: 1.0625rem;
	--ds-text-body-lg: 1.125rem;
	--ds-text-body: 1rem;
	--ds-text-body-sm: 0.875rem;
	--ds-text-caption: 0.75rem;

	--ds-leading-tight: 1.2;
	--ds-leading-snug: 1.35;
	--ds-leading-body: 1.6;
	--ds-tracking-tight: -0.02em;
	--ds-tracking-wide: 0.06em;
	--ds-tracking-caps: 0.1em;

	/* Spacing — 4px base: 4 8 12 16 24 32 40 48 64 80 96 */
	--ds-space-1: 0.25rem;
	--ds-space-2: 0.5rem;
	--ds-space-3: 0.75rem;
	--ds-space-4: 1rem;
	--ds-space-5: 1.5rem;
	--ds-space-6: 2rem;
	--ds-space-7: 2.5rem;
	--ds-space-8: 3rem;
	--ds-space-9: 4rem;
	--ds-space-10: 5rem;
	--ds-space-11: 6rem;
	--ds-space-12: 8rem;

	--ds-radius-sm: 4px;
	--ds-radius-md: 8px;
	--ds-radius-lg: 8px;
	--ds-radius-full: 999px;

	--ds-shadow-none: none;
	--ds-shadow-sm: none;
	--ds-shadow-md: none;

	--ds-container-max: 72rem;
	--ds-shell-max: 80rem;
	--ds-container-narrow: 42rem;
	--ds-gutter: 1.5rem;
	--ds-grid-columns: 12;
	--ds-header-height: 6.375rem;
	--ds-logo-height: 4.875rem;
	--ds-logo-height-sm: 4.1rem;
	--ds-tap: 2.75rem;

	--ds-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ds-duration: 200ms;
	--ds-focus-ring: 2px solid var(--ds-color-focus);
	--ds-focus-ring-on-dark: 2px solid var(--ds-color-text-on-dark);
	--ds-focus-offset: 3px;

	--ds-bp-sm: 30rem;
	--ds-bp-md: 48rem;
	--ds-bp-lg: 64rem;
	--ds-bp-xl: 80rem;
	--ds-bp-2xl: 90rem;
}