/**
 * Design tokens — Ramos Alas brand
 *
 * Source: Manual gráfico Ramos Alas 2026.pdf
 * Do not hardcode hex colors or font stacks anywhere else in the theme —
 * reference these custom properties instead so the brand can be adjusted
 * from one place (or overridden live from the Customizer, see
 * ramosalas_customizer_css() in inc/customizer.php).
 *
 * @package ramosalas
 */

:root {
	/* Brand palette (manual gráfico, p.10) */
	--ra-navy: #004267;
	--ra-teal: #309ab8;
	--ra-orange: #e4792a;
	--ra-sky: #a3cede;
	--ra-amber: #eea748;

	/* Darkened variants for AA-safe text/links where the brand color itself
	   does not meet contrast (see note below). */
	--ra-navy-dark: #002c46;
	--ra-orange-ink: #b45a1c;

	/* Semantic roles */
	--ra-color-primary: var(--ra-navy);
	--ra-color-secondary: var(--ra-teal);
	--ra-color-accent: var(--ra-orange);
	--ra-color-accent-ink: var(--ra-orange-ink);
	--ra-color-support: var(--ra-sky);
	--ra-color-support-alt: var(--ra-amber);

	--ra-color-ink: #14202b;
	--ra-color-muted: #5b6b74;
	--ra-color-border: #dbe4e8;
	--ra-color-surface: #ffffff;
	--ra-color-surface-alt: #f4f8fa;
	--ra-color-surface-dark: var(--ra-navy);

	--ra-color-success-bg: #d4edda;
	--ra-color-success-ink: #155724;
	--ra-color-error-bg: #f8d7da;
	--ra-color-error-ink: #721c24;
	--ra-color-warning-bg: #fef3cd;
	--ra-color-warning-ink: #856404;

	/*
	 * Contraste — el teal (#309ab8, ~3:1 sobre blanco) y el naranja puro
	 * (~2.9:1) NO cumplen AA como texto normal sobre fondo blanco.
	 * Úsalos solo en: texto grande (>=24px o >=19px bold), iconografía,
	 * fondos de botón (con texto blanco encima) o elementos decorativos.
	 * Para texto/enlaces sobre blanco usa --ra-color-primary (navy) o,
	 * si se necesita tono naranja, --ra-color-accent-ink.
	 */

	/* Type */
	--ra-font-sans: "Acumin Variable Concept", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ra-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

	--ra-fs-300: 1.1875rem;
	--ra-fs-400: 1.3125rem;
	--ra-fs-500: 1.5rem;
	--ra-fs-600: clamp(1.75rem, 1.5rem + 0.9vw, 2.125rem);
	--ra-fs-700: clamp(2.125rem, 1.8rem + 1.4vw, 2.75rem);
	--ra-fs-800: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);
	--ra-fs-900: clamp(3rem, 2.2rem + 3.4vw, 4.5rem);

	--ra-lh-tight: 1.15;
	--ra-lh-normal: 1.5;
	--ra-lh-relaxed: 1.7;

	--ra-fw-regular: 400;
	--ra-fw-medium: 500;
	--ra-fw-semibold: 600;
	--ra-fw-bold: 700;
	--ra-fw-black: 900;

	/* Space (4px base) */
	--ra-space-1: 0.25rem;
	--ra-space-2: 0.5rem;
	--ra-space-3: 1rem;
	--ra-space-4: 1.25rem;
	--ra-space-6: 2rem;
	--ra-space-8: 2.75rem;
	--ra-space-12: 4rem;
	--ra-space-16: 5.5rem;
	--ra-space-24: 8rem;

	--ra-radius-sm: 4px;
	--ra-radius: 8px;
	--ra-radius-lg: 16px;
	--ra-radius-pill: 999px;

	--ra-shadow-1: 0 2px 8px rgba(0, 66, 103, 0.08);
	--ra-shadow-2: 0 8px 24px rgba(0, 66, 103, 0.14);

	--ra-container: 1200px;
	--ra-container-narrow: 800px;
	--ra-gutter: 1rem;

	--ra-duration: 220ms;
	--ra-duration-slow: 400ms;
	--ra-easing: ease;

	/* Gradient used behind the isotipo / dark hero surfaces */
	--ra-gradient-brand: linear-gradient(160deg, var(--ra-navy) 0%, var(--ra-teal) 65%, var(--ra-sky) 100%);
	--ra-gradient-overlay: linear-gradient(180deg, rgba(0, 32, 51, 0.75) 0%, rgba(0, 32, 51, 0.35) 55%, rgba(0, 32, 51, 0.75) 100%);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ra-duration: 0ms;
		--ra-duration-slow: 0ms;
	}
}

/* Tighten the larger spacing steps on phones — section/card/form padding
   built on --ra-space-8 and up would otherwise eat a big share of a
   ~375-400px viewport. Component CSS never hardcodes px, so this one
   change re-flows every section/card/form padding at once. */
@media (max-width: 39.99em) {
	:root {
		--ra-space-8: 1.75rem;
		--ra-space-12: 2.5rem;
		--ra-space-16: 3rem;
		--ra-space-24: 4rem;
	}
}