/**
 * ==========================================================================
 * Ecademis Design System — Central Tokens Layer (`DESIGN-SYSTEM-001A`)
 * Official Brand System derived from Libro de Marca & BRAND-ASSETS-001.
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   1. Local Font Faces (Zero external requests, font-display: swap)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Design Tokens Root Declaration
   -------------------------------------------------------------------------- */
:root {
	/* Base Brand Tokens */
	--ec-brand-indigo: #26356d;
	--ec-brand-blue: #5269c7;
	--ec-brand-orange: #f47a3c;
	--ec-brand-orange-action: #b9440e;
	--ec-brand-cream: #fafaf7;
	--ec-brand-ink: #20263a;

	/* Semantic Tokens (Brand & Theme Defaults) */
	--ec-color-brand-primary: var(--ec-brand-indigo);
	--ec-color-brand-primary-contrast: #ffffff;
	--ec-color-brand-secondary: var(--ec-brand-blue);
	--ec-color-brand-secondary-contrast: #ffffff;
	--ec-color-brand-accent: var(--ec-brand-orange);
	--ec-color-brand-action: var(--ec-brand-orange-action);
	--ec-color-brand-action-contrast: #ffffff;

	/* Semantic Tokens (Surfaces & Neutral Text) */
	--ec-color-text: var(--ec-brand-ink);
	--ec-color-text-muted: #57627d;
	--ec-color-surface: #ffffff;
	--ec-color-surface-subtle: var(--ec-brand-cream);
	--ec-color-border: #dbe0ea;
	--ec-color-border-strong: #b5bfd0;
	--ec-color-focus-ring: rgba(59, 130, 246, 0.18);
	--ec-color-error-contrast: #ffffff;
	--ec-color-focus: #3b82f6;

	/* Semantic Status States (Approved tokens) */
	--ec-color-info: #2563eb;
	--ec-color-success: #28785e;
	--ec-color-warning: #9a6500;
	--ec-color-error: #b23b43;

	/* Semantic Status Backgrounds & Borders */
	--ec-color-info-bg: #eff6ff;
	--ec-color-info-border: #bfdbfe;
	--ec-color-success-bg: #edf7f3;
	--ec-color-success-border: #bfe5d7;
	--ec-color-warning-bg: #fffbeb;
	--ec-color-warning-border: #fef08a;
	--ec-color-error-bg: #fdf2f2;
	--ec-color-error-border: #fecaca;

	/* Typography Families */
	--ec-font-functional: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--ec-font-editorial: 'Source Serif 4', Georgia, Cambria, 'Times New Roman', serif;

	/* Typography Scale (Desktop Baseline) */
	--ec-text-display-size: 40px;
	--ec-text-display-line: 43px;
	--ec-text-h1-size: 29px;
	--ec-text-h1-line: 34px;
	--ec-text-h2-size: 22px;
	--ec-text-h2-line: 28px;
	--ec-text-h3-size: 17px;
	--ec-text-h3-line: 23px;
	--ec-text-body-size: 15px;
	--ec-text-body-line: 25px;
	--ec-text-secondary-size: 13px;
	--ec-text-secondary-line: 20px;
	--ec-text-label-size: 11px;
	--ec-text-label-line: 15px;

	/* Font Weights */
	--ec-font-weight-regular: 400;
	--ec-font-weight-medium: 500;
	/* Compatibility alias: approved local font files provide weights 400 and 500 only. */
	--ec-font-weight-bold: 500;

	/* Spacing Scale */
	--ec-space-1: 4px;
	--ec-space-2: 8px;
	--ec-space-3: 16px;
	--ec-space-4: 24px;
	--ec-space-5: 32px;

	/* Radii Tokens */
	--ec-radius-sm: 6px;
	--ec-radius-control: 9px;
	--ec-radius-card: 16px;
	--ec-radius-full: 9999px;

	/* Elevation & Shadows */
	--ec-shadow-sm: 0 1px 2px rgba(32, 38, 58, 0.05);
	--ec-shadow-md: 0 4px 6px -1px rgba(32, 38, 58, 0.07), 0 2px 4px -2px rgba(32, 38, 58, 0.04);
	--ec-shadow-lg: 0 10px 15px -3px rgba(32, 38, 58, 0.09), 0 4px 6px -4px rgba(32, 38, 58, 0.04);

	/* Motion Tokens */
	--ec-motion-fast: 160ms;
	--ec-motion-standard: 240ms;
	--ec-motion-confirmation: 400ms;
	--ec-motion-easing: cubic-bezier(.2, .8, .2, 1);

	/* ----------------------------------------------------------------------
	   Progressive Compatibility Layer (Legacy aliases pointing to new tokens)
	   ---------------------------------------------------------------------- */
	--cw-primary: var(--ec-color-brand-primary);
	--cw-dark: var(--ec-color-text);
	--cw-slate: var(--ec-brand-indigo);
	--cw-muted: var(--ec-color-text-muted);
	--cw-light-bg: var(--ec-color-surface-subtle);
	--cw-card-bg: var(--ec-color-surface);
	--cw-border: var(--ec-color-border);
	--cw-radius: var(--ec-radius-control);
	--cw-radius-lg: var(--ec-radius-card);

	--ecademis-dark: var(--ec-brand-ink);
	--ecademis-slate: var(--ec-brand-indigo);
	--ecademis-primary: var(--ec-color-brand-primary);
	--ecademis-light-bg: var(--ec-color-surface-subtle);
	--ecademis-card-bg: var(--ec-color-surface);
	--ecademis-border: var(--ec-color-border);
	--ecademis-radius: var(--ec-radius-control);
}

/* --------------------------------------------------------------------------
   3. Reduced Motion Support
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ec-motion-fast: 0.01ms;
		--ec-motion-standard: 0.01ms;
		--ec-motion-confirmation: 0.01ms;
	}

	.ec-design-system *,
	.ec-design-system *::before,
	.ec-design-system *::after,
	.ec-reduced-motion-active *,
	.ec-reduced-motion-active *::before,
	.ec-reduced-motion-active *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   4. Mobile Input Rule: Minimum 16px font-size to avoid iOS auto-zoom
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.ec-design-system input,
	.ec-design-system textarea,
	.ec-design-system select,
	.ec-input {
		font-size: 16px !important;
		line-height: 22px !important;
	}
}

/* --------------------------------------------------------------------------
   5. Scoped Component Utility Classes
   (All scoped to avoid global element pollution)
   -------------------------------------------------------------------------- */

/* Typography */
.ec-text-display {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-display-size);
	line-height: var(--ec-text-display-line);
	font-weight: var(--ec-font-weight-medium);
	letter-spacing: -0.02em;
}

.ec-text-h1 {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-h1-size);
	line-height: var(--ec-text-h1-line);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: -0.015em;
}

.ec-text-h2 {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-h2-size);
	line-height: var(--ec-text-h2-line);
	font-weight: var(--ec-font-weight-bold);
}

.ec-text-h3 {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-h3-size);
	line-height: var(--ec-text-h3-line);
	font-weight: var(--ec-font-weight-bold);
}

.ec-text-body {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-body-size);
	line-height: var(--ec-text-body-line);
	font-weight: var(--ec-font-weight-regular);
}

.ec-text-secondary {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-secondary-size);
	line-height: var(--ec-text-secondary-line);
	font-weight: var(--ec-font-weight-regular);
	color: var(--ec-color-text-muted);
}

.ec-text-label {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-label-size);
	line-height: var(--ec-text-label-line);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ec-text-editorial {
	font-family: var(--ec-font-editorial);
	font-style: normal;
}

/* Buttons */
.ec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-2);
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-body-size);
	font-weight: var(--ec-font-weight-medium);
	line-height: 1;
	padding: 10px 18px;
	border-radius: var(--ec-radius-control);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color var(--ec-motion-fast) var(--ec-motion-easing),
	            border-color var(--ec-motion-fast) var(--ec-motion-easing),
	            color var(--ec-motion-fast) var(--ec-motion-easing),
	            box-shadow var(--ec-motion-fast) var(--ec-motion-easing),
	            transform var(--ec-motion-fast) var(--ec-motion-easing);
	white-space: nowrap;
	min-height: 44px;
}

.ec-btn:focus-visible {
	outline: 2px solid var(--ec-color-focus);
	outline-offset: 2px;
}

.ec-btn--primary {
	background-color: var(--ec-color-brand-primary);
	color: var(--ec-color-brand-primary-contrast);
	border-color: var(--ec-color-brand-primary);
}

.ec-btn--primary:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: var(--ec-shadow-md);
}

.ec-btn--action {
	background-color: var(--ec-color-brand-action);
	color: var(--ec-color-brand-action-contrast);
	border-color: var(--ec-color-brand-action);
}

.ec-btn--action:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: var(--ec-shadow-md);
}

.ec-btn--secondary {
	background-color: var(--ec-color-brand-secondary);
	color: var(--ec-color-brand-secondary-contrast);
	border-color: var(--ec-color-brand-secondary);
}

.ec-btn--secondary:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.ec-btn--outline {
	background-color: transparent;
	color: var(--ec-color-text);
	border-color: var(--ec-color-border);
}

.ec-btn--outline:hover {
	background-color: var(--ec-color-surface-subtle);
	border-color: var(--ec-color-border-strong);
}

.ec-btn--danger {
	background-color: var(--ec-color-error);
	color: var(--ec-color-error-contrast);
	border-color: var(--ec-color-error);
}

.ec-btn--danger:hover {
	filter: brightness(1.1);
}

/* Form Controls */
.ec-input,
.ec-select {
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-body-size);
	color: var(--ec-color-text);
	background-color: var(--ec-color-surface);
	border: 1px solid var(--ec-color-border);
	border-radius: var(--ec-radius-control);
	padding: 10px 14px;
	box-sizing: border-box;
	transition: border-color var(--ec-motion-fast) var(--ec-motion-easing),
	            box-shadow var(--ec-motion-fast) var(--ec-motion-easing);
	width: 100%;
	min-height: 44px;
}

.ec-input:focus,
.ec-select:focus {
	outline: none;
	border-color: var(--ec-color-focus);
	box-shadow: 0 0 0 3px var(--ec-color-focus-ring);
}

.ec-label {
	display: block;
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-secondary-size);
	font-weight: var(--ec-font-weight-medium);
	color: var(--ec-color-text);
	margin-bottom: var(--ec-space-1);
}

/* Cards & Surfaces */
.ec-card {
	background-color: var(--ec-color-surface);
	border: 1px solid var(--ec-color-border);
	border-radius: var(--ec-radius-card);
	padding: var(--ec-space-4);
	box-shadow: var(--ec-shadow-sm);
	box-sizing: border-box;
}

.ec-card--elevated {
	box-shadow: var(--ec-shadow-md);
}

/* Semantic Badges */
.ec-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--ec-radius-full);
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-label-size);
	font-weight: var(--ec-font-weight-bold);
	line-height: var(--ec-text-label-line);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ec-badge--info {
	background-color: var(--ec-color-info-bg);
	color: var(--ec-color-info);
	border: 1px solid var(--ec-color-info-border);
}

.ec-badge--success {
	background-color: var(--ec-color-success-bg);
	color: var(--ec-color-success);
	border: 1px solid var(--ec-color-success-border);
}

.ec-badge--warning {
	background-color: var(--ec-color-warning-bg);
	color: var(--ec-color-warning);
	border: 1px solid var(--ec-color-warning-border);
}

.ec-badge--error {
	background-color: var(--ec-color-error-bg);
	color: var(--ec-color-error);
	border: 1px solid var(--ec-color-error-border);
}

/* Semantic Alerts */
.ec-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--ec-space-3);
	padding: var(--ec-space-3) var(--ec-space-4);
	border-radius: var(--ec-radius-control);
	border: 1px solid transparent;
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-body-size);
	line-height: 1.5;
	margin-bottom: var(--ec-space-3);
}

.ec-alert--info {
	background-color: var(--ec-color-info-bg);
	border-color: var(--ec-color-info-border);
	color: var(--ec-color-info);
}

.ec-alert--success {
	background-color: var(--ec-color-success-bg);
	border-color: var(--ec-color-success-border);
	color: var(--ec-color-success);
}

.ec-alert--warning {
	background-color: var(--ec-color-warning-bg);
	border-color: var(--ec-color-warning-border);
	color: var(--ec-color-warning);
}

.ec-alert--error {
	background-color: var(--ec-color-error-bg);
	border-color: var(--ec-color-error-border);
	color: var(--ec-color-error);
}

/* Spinner / Loading indicator */
.ec-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid var(--ec-color-border);
	border-top-color: var(--ec-color-brand-primary);
	border-radius: 50%;
	animation: ec-spin 0.8s linear infinite;
	box-sizing: border-box;
}

@keyframes ec-spin {
	to { transform: rotate(360deg); }
}


/* Tables and modal remain scoped through Ecademis component classes. */
.ec-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-body-size);
	color: var(--ec-color-text);
}
.ec-table th,
.ec-table td {
	padding: var(--ec-space-2) var(--ec-space-3);
	border-bottom: 1px solid var(--ec-color-border);
	text-align: left;
}
.ec-table thead th { background: var(--ec-color-surface-subtle); font-weight: var(--ec-font-weight-medium); }
.ec-dialog {
	max-width: min(480px, calc(100vw - 32px));
	border: 1px solid var(--ec-color-border);
	border-radius: var(--ec-radius-card);
	padding: var(--ec-space-4);
	color: var(--ec-color-text);
	background: var(--ec-color-surface);
	box-shadow: var(--ec-shadow-lg);
	font-family: var(--ec-font-functional);
}
.ec-dialog::backdrop { background: rgba(32, 38, 58, 0.55); }
.ec-dialog:focus-visible { outline: 3px solid var(--ec-color-focus); outline-offset: 3px; }