/**
 * Material Design 3 — design tokens (escalable a todo el sitio)
 * Scope: .page-md3 (páginas migradas).
 * Seed: Google Blue; primary sigue --color_variable_1 (color dinámico).
 */
@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto/Roboto-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.page-md3 {
	/* ── Color recipes (theme-independent; used by roles + inverse) ── */
	--md-sys-color-primary-container-light: color-mix(in srgb, var(--color_variable_1, #0b57d0) 24%, #ffffff);
	--md-sys-color-on-primary-container-light: color-mix(in srgb, var(--color_variable_1, #0b57d0) 72%, #000000);
	--md-sys-color-primary-container-dark: color-mix(in srgb, var(--color_variable_1, #0b57d0) 55%, #000000);
	--md-sys-color-on-primary-container-dark: color-mix(in srgb, var(--color_variable_1, #0b57d0) 18%, #e8eef8);

	--md-sys-color-secondary-container-light: color-mix(in srgb, var(--color_variable_1, #0b57d0) 16%, #ffffff);
	--md-sys-color-on-secondary-container-light: color-mix(in srgb, var(--color_variable_1, #0b57d0) 68%, #000000);
	--md-sys-color-secondary-container-dark: color-mix(in srgb, var(--color_variable_1, #0b57d0) 32%, #1e1f25);
	--md-sys-color-on-secondary-container-dark: color-mix(in srgb, var(--color_variable_1, #0b57d0) 22%, #dae2f9);

	/* ── Color roles (light) ── */
	--md-sys-color-primary: var(--color_variable_1, #0b57d0);
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
	--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);

	/* Secondary / tonal también siguen el acento (nav activo, segmented, etc.) */
	--md-sys-color-secondary: color-mix(in srgb, var(--color_variable_1, #0b57d0) 42%, #565e71);
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
	--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);

	--md-sys-color-tertiary: #006a60;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #74f8e5;
	--md-sys-color-on-tertiary-container: #00201c;

	--md-sys-color-error: #ba1a1a;
	--md-sys-color-on-error: #ffffff;
	--md-sys-color-error-container: #ffdad6;
	--md-sys-color-on-error-container: #410002;

	--md-sys-color-surface: #f8f9ff;
	--md-sys-color-on-surface: #1a1b1f;
	--md-sys-color-surface-dim: #d9d9e0;
	--md-sys-color-surface-bright: #f8f9ff;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #f3f3fa;
	--md-sys-color-surface-container: #ededf4;
	--md-sys-color-surface-container-high: #e7e8ee;
	--md-sys-color-surface-container-highest: #e2e2e9;
	--md-sys-color-on-surface-variant: #43474e;
	--md-sys-color-outline: #74777f;
	--md-sys-color-outline-variant: #c4c6d0;

	--md-sys-color-inverse-surface: #2f3033;
	--md-sys-color-inverse-on-surface: #f1f0f7;
	--md-sys-color-inverse-primary: #a8c7fa;

	/* Inverse tonal containers: opposite of current theme (light → dark recipe, dark → light) */
	--md-sys-color-inverse-primary-container: var(--md-sys-color-primary-container-dark);
	--md-sys-color-inverse-on-primary-container: var(--md-sys-color-on-primary-container-dark);
	--md-sys-color-inverse-secondary-container: var(--md-sys-color-secondary-container-dark);
	--md-sys-color-inverse-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);

	--md-sys-color-scrim: #000000;
	--md-sys-color-shadow: #000000;

	/* ── Shape ── */
	--md-sys-shape-corner-none: 0;
	--md-sys-shape-corner-extra-small: 4px;
	--md-sys-shape-corner-small: 8px;
	--md-sys-shape-corner-medium: 12px;
	--md-sys-shape-corner-large: 16px;
	--md-sys-shape-corner-extra-large: 28px;
	--md-sys-shape-corner-full: 9999px;

	/* ── Elevation (ambient + key, M3-ish) ── */
	--md-sys-elevation-0: none;
	--md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent),
		0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
	--md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent),
		0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
	--md-sys-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent),
		0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);

	/* ── Type scale ── */
	--md-sys-typescale-display-large-size: clamp(3.6rem, 6.5vw, 5.7rem);
	--md-sys-typescale-display-medium-size: clamp(2.8rem, 4.5vw, 4.5rem);
	--md-sys-typescale-display-small-size: clamp(2.4rem, 3.5vw, 3.6rem);
	--md-sys-typescale-headline-large-size: clamp(2.2rem, 3vw, 3.2rem);
	--md-sys-typescale-headline-medium-size: clamp(2rem, 2.5vw, 2.8rem);
	--md-sys-typescale-headline-small-size: clamp(1.8rem, 2vw, 2.4rem);
	--md-sys-typescale-title-large-size: 2.2rem;
	--md-sys-typescale-title-medium-size: 1.6rem;
	--md-sys-typescale-body-large-size: 1.6rem;
	--md-sys-typescale-body-medium-size: 1.4rem;
	--md-sys-typescale-label-large-size: 1.4rem;
	--md-sys-typescale-label-medium-size: 1.2rem;
	--md-sys-typescale-label-small-size: 1.1rem;

	--md-sys-font: "Roboto", system-ui, "Segoe UI", Arial, sans-serif;

	/* ── Motion ── */
	--md-sys-motion-duration-short1: 50ms;
	--md-sys-motion-duration-short2: 100ms;
	--md-sys-motion-duration-short3: 150ms;
	--md-sys-motion-duration-short4: 200ms;
	--md-sys-motion-duration-medium1: 250ms;
	--md-sys-motion-duration-medium2: 300ms;
	--md-sys-motion-duration-medium3: 350ms;
	--md-sys-motion-duration-medium4: 400ms;
	--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

	/* ── State layers / ripple (MD3) ── */
	--md-sys-state-hover-opacity: 0.08;
	--md-sys-state-focus-opacity: 0.12;
	--md-sys-state-pressed-opacity: 0.12;
	--md-sys-state-dragged-opacity: 0.16;

	/* ── Layout ── */
	--md-sys-spacing-unit: 8px;
	--md-sys-layout-margin: clamp(16px, 5vw, 48px);
	--md-sys-layout-max: 1120px;
	/*
	 * Columna de contenido alineada en todo el home:
	 * - en viewports compactos = margen fluido;
	 * - en pantallas amplias = centrado respecto al layout máximo.
	 * Usar width + max-width + margin auto (sin padding-inline extra).
	 */
	--md-sys-layout-content-width: calc(100% - (2 * var(--md-sys-layout-margin)));
	--md-sys-layout-inset: max(
		var(--md-sys-layout-margin),
		calc((100% - var(--md-sys-layout-max)) / 2)
	);

	/* Bridge legacy tokens used by shared chrome still on the page */
	--accent: var(--md-sys-color-primary);
	--system-background: var(--md-sys-color-surface);
	--secondary-system-background: var(--md-sys-color-surface-container);
	--label: var(--md-sys-color-on-surface);
	--secondary-label: var(--md-sys-color-on-surface-variant);
	--separator: var(--md-sys-color-outline-variant);
	--font-sans: var(--md-sys-font);
	--radius-sm: var(--md-sys-shape-corner-small);
	--radius-md: var(--md-sys-shape-corner-medium);
	--radius-lg: var(--md-sys-shape-corner-large);
	--radius-pill: var(--md-sys-shape-corner-full);
	/* main_icon.svg es blanco: en light → negro */
	--brand-icon-filter: invert(1);
	--tech-icon-filter: none;
}

.page-md3[data-theme="dark"],
[data-theme="dark"] .page-md3 {
	--md-sys-color-primary: var(--color_variable_3, #a8c7fa);
	/* Antes era #062e6f fijo (azul Google); ahora sigue el acento */
	--md-sys-color-on-primary: color-mix(in srgb, var(--color_variable_1, #0b57d0) 40%, #000000);
	--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
	--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);

	--md-sys-color-secondary: var(--color_variable_3, #a8c7fa);
	--md-sys-color-on-secondary: #1a1b1f;
	--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
	--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);

	--md-sys-color-surface: #111318;
	--md-sys-color-on-surface: #e2e2e9;
	--md-sys-color-surface-container-lowest: #0c0e13;
	--md-sys-color-surface-container-low: #1a1b1f;
	--md-sys-color-surface-container: #1e1f25;
	--md-sys-color-surface-container-high: #282a2f;
	--md-sys-color-surface-container-highest: #33353a;
	--md-sys-color-on-surface-variant: #c4c6d0;
	--md-sys-color-outline: #8e9099;
	--md-sys-color-outline-variant: #43474e;

	--md-sys-color-inverse-surface: #e2e2e9;
	--md-sys-color-inverse-on-surface: #2f3033;
	--md-sys-color-inverse-primary: var(--color_variable_1, #0b57d0);

	/* En dark, lo inverse vuelve al recipe light */
	--md-sys-color-inverse-primary-container: var(--md-sys-color-primary-container-light);
	--md-sys-color-inverse-on-primary-container: var(--md-sys-color-on-primary-container-light);
	--md-sys-color-inverse-secondary-container: var(--md-sys-color-secondary-container-light);
	--md-sys-color-inverse-on-secondary-container: var(--md-sys-color-on-secondary-container-light);

	/* main_icon.svg blanco sobre surface oscura */
	--brand-icon-filter: none;
	--tech-icon-filter: invert(1);
	--accent: var(--md-sys-color-primary);
	--label: var(--md-sys-color-on-surface);
	--secondary-label: var(--md-sys-color-on-surface-variant);
	--system-background: var(--md-sys-color-surface);
	--secondary-system-background: var(--md-sys-color-surface-container);
	--separator: var(--md-sys-color-outline-variant);
}

/* Alias: home uses both classes during migration */
.page-home-md3 {
	/* inherits via .page-md3 on the same element */
}

/*
 * ── High contrast (html.contrast-more) ─────────────────────────────────────
 * Debe ir DESPUÉS de los roles light/dark para ganar la cascada.
 * Valores absolutos (sin circular --label ↔ --md-sys-color-on-surface).
 * Cubre: home, gallery, project view, settings (+ chrome compartido).
 */
html.contrast-more[data-theme="light"] .page-md3 {
	--md-sys-color-on-surface: #000000;
	--md-sys-color-on-surface-variant: #1f1f1f;
	--md-sys-color-outline: #2e2e2e;
	--md-sys-color-outline-variant: #4a4a4a;

	--md-sys-color-surface: #ffffff;
	--md-sys-color-surface-dim: #e4e4e4;
	--md-sys-color-surface-bright: #ffffff;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #f2f2f2;
	--md-sys-color-surface-container: #ebebeb;
	--md-sys-color-surface-container-high: #e0e0e0;
	--md-sys-color-surface-container-highest: #d6d6d6;

	--md-sys-color-primary: color-mix(in srgb, var(--color_variable_1, #0b57d0) 82%, #000000);
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: color-mix(in srgb, var(--color_variable_1, #0b57d0) 32%, #ffffff);
	--md-sys-color-on-primary-container: #000000;

	--md-sys-color-secondary: color-mix(in srgb, var(--color_variable_1, #0b57d0) 55%, #1a1a1a);
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: color-mix(in srgb, var(--color_variable_1, #0b57d0) 24%, #ffffff);
	--md-sys-color-on-secondary-container: #000000;

	--md-sys-color-tertiary-container: #c8fff6;
	--md-sys-color-on-tertiary-container: #000000;
	--md-sys-color-error: #8b0000;
	--md-sys-color-on-error: #ffffff;
	--md-sys-color-on-error-container: #3b0000;

	--md-sys-color-inverse-surface: #000000;
	--md-sys-color-inverse-on-surface: #ffffff;

	/* Puente legacy (nav HIG residual, 404 embebido, etc.) */
	--label: #000000;
	--secondary-label: #1f1f1f;
	--tertiary-label: #333333;
	--separator: #4a4a4a;
	--system-background: #ffffff;
	--secondary-system-background: #ebebeb;
	--accent: var(--md-sys-color-primary);
}

html.contrast-more[data-theme="dark"] .page-md3 {
	--md-sys-color-on-surface: #ffffff;
	--md-sys-color-on-surface-variant: #f0f0f0;
	--md-sys-color-outline: #d0d0d0;
	--md-sys-color-outline-variant: #a0a0a0;

	--md-sys-color-surface: #000000;
	--md-sys-color-surface-dim: #000000;
	--md-sys-color-surface-bright: #1a1a1a;
	--md-sys-color-surface-container-lowest: #000000;
	--md-sys-color-surface-container-low: #121212;
	--md-sys-color-surface-container: #1a1a1a;
	--md-sys-color-surface-container-high: #242424;
	--md-sys-color-surface-container-highest: #2e2e2e;

	--md-sys-color-primary: color-mix(in srgb, var(--color_variable_3, #a8c7fa) 45%, #ffffff);
	--md-sys-color-on-primary: #000000;
	--md-sys-color-primary-container: color-mix(in srgb, var(--color_variable_1, #0b57d0) 50%, #000000);
	--md-sys-color-on-primary-container: #ffffff;

	--md-sys-color-secondary: color-mix(in srgb, var(--color_variable_3, #a8c7fa) 35%, #ffffff);
	--md-sys-color-on-secondary: #000000;
	--md-sys-color-secondary-container: color-mix(in srgb, var(--color_variable_1, #0b57d0) 38%, #000000);
	--md-sys-color-on-secondary-container: #ffffff;

	--md-sys-color-tertiary-container: #003d36;
	--md-sys-color-on-tertiary-container: #ffffff;
	--md-sys-color-error: #ff8a80;
	--md-sys-color-on-error: #000000;
	--md-sys-color-on-error-container: #ffffff;

	--md-sys-color-inverse-surface: #ffffff;
	--md-sys-color-inverse-on-surface: #000000;

	--label: #ffffff;
	--secondary-label: #f0f0f0;
	--tertiary-label: #dddddd;
	--separator: #a0a0a0;
	--system-background: #000000;
	--secondary-system-background: #1a1a1a;
	--accent: var(--md-sys-color-primary);
}

/* Chrome / textos atenuados por opacity → opacos en contraste alto */
html.contrast-more .page-md3 .navbar-dest,
html.contrast-more .page-md3 .navbar-options-txt,
html.contrast-more .page-md3 .navbar-iconBtn {
	opacity: 1 !important;
}

html.contrast-more .page-md3 .m3-footer__link {
	opacity: 1 !important;
	color: var(--md-sys-color-on-surface-variant);
}

html.contrast-more .page-md3 .m3-footer__tagline,
html.contrast-more .page-md3 .m3-footer__copy,
html.contrast-more .page-md3 .m3-footer__copyTrigger {
	color: var(--md-sys-color-on-surface-variant);
}

html.contrast-more .page-md3 .settings-accent__name,
html.contrast-more .page-md3 .settings-inset__label,
html.contrast-more .page-md3 .m3-home-skills__lead,
html.contrast-more .page-md3 .m3-home-skills__desc,
html.contrast-more .page-md3 .m3-featured-card__desc,
html.contrast-more .page-md3 .galleryHero__title,
html.contrast-more .page-md3 .empty-state__hint {
	color: var(--md-sys-color-on-surface-variant);
}

html.contrast-more .page-md3 .md3-hero_title,
html.contrast-more .page-md3 .md3-hero_eyebrow,
html.contrast-more .page-md3 .settingsHero__title,
html.contrast-more .page-md3 .settings-group__title,
html.contrast-more .page-md3 .empty-state__title {
	color: var(--md-sys-color-on-surface);
}

html.contrast-more .page-md3 .md3-hero_headline {
	color: var(--md-sys-color-on-surface-variant);
}

/* Bordes más legibles en cards / inputs */
html.contrast-more .page-md3 .m3-search-field,
html.contrast-more .page-md3 .settings-inset,
html.contrast-more .page-md3 .m3-list-group,
html.contrast-more .page-md3 .galleryCard--md3 {
	box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}