/* ==========================================================================
   Aprop · Design tokens
   Variables CSS de marca. Único sitio donde se definen colores/escalas.
   ========================================================================== */

:root {
	/* --- Paleta de marca ------------------------------------------------- */
	--aprop-green: #0E7C4A;        /* Primario · CTAs · headers de marca       */
	--aprop-green-dark: #1B5A39;   /* Hover · sombras del primario             */
	--aprop-green-light: #A8D8B6;  /* Eyebrows · acentos sobre dark            */
	--aprop-ink: #1B2330;          /* Texto principal · azul oscuro            */
	--aprop-ink-900: #17212D;      /* Dark sections · splash app               */
	--aprop-cream: #FAF6EE;        /* Backgrounds secundarios · bandas         */
	--aprop-white: #FFFFFF;

	/* Gradiente naranja-rojo: SÓLO para la "A" del logo. No usar en UI. */
	--aprop-logo-grad: linear-gradient(135deg, #FF6A1F 0%, #E5392A 100%);

	/* --- Roles semánticos ----------------------------------------------- */
	--color-primary: var(--aprop-green);
	--color-primary-hover: var(--aprop-green-dark);
	--color-on-primary: var(--aprop-white);
	--color-text: var(--aprop-ink);
	--color-text-muted: #5B6472;
	--color-heading: var(--aprop-ink-900);
	--color-bg: var(--aprop-white);
	--color-bg-alt: var(--aprop-cream);
	--color-bg-dark: var(--aprop-ink-900);
	--color-on-dark: #E9EDF2;
	--color-border: #E6E3DB;
	--color-link: var(--aprop-green);
	--color-link-hover: var(--aprop-green-dark);
	--color-success: var(--aprop-green);
	--color-danger: #E5392A;
	--color-focus: #1273C7;

	/* --- Tipografía ------------------------------------------------------ */
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-head: 'Inter', system-ui, -apple-system, sans-serif; /* swap opcional a serif de marca */

	--fs-base: 1rem;     /* 16px */
	--lh-base: 1.5;
	--lh-tight: 1.2;

	/* Escala modular 1.25 */
	--fs-xs: 0.8rem;     /* 12.8px */
	--fs-sm: 0.9rem;     /* 14.4px */
	--fs-md: 1rem;       /* 16px   */
	--fs-lg: 1.25rem;    /* 20px   */
	--fs-xl: 1.563rem;   /* 25px   */
	--fs-2xl: 1.953rem;  /* 31px   */
	--fs-3xl: 2.441rem;  /* 39px   */
	--fs-4xl: 3.052rem;  /* 49px   */

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

	/* --- Espaciado ------------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	/* --- Layout ---------------------------------------------------------- */
	--container: 1200px;
	--container-wide: 1320px;
	--gutter: 1rem;

	--radius-sm: 6px;
	--radius: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(27, 35, 48, 0.06), 0 1px 3px rgba(27, 35, 48, 0.08);
	--shadow: 0 4px 14px rgba(27, 35, 48, 0.08);
	--shadow-lg: 0 12px 32px rgba(27, 35, 48, 0.12);

	/* Alturas de cabecera (THEME_PLAN §6) */
	--topbar-h: 40px;
	--header-h: 110px;

	/* --- Transiciones / z-index ----------------------------------------- */
	--t-fast: 0.15s ease;
	--t: 0.25s ease;
	--z-header: 100;
	--z-offcanvas: 200;
	--z-overlay: 190;
}

/*
 * Breakpoints (referencia, mobile-first):
 *   sm: 768px  ·  md: 1024px  ·  lg: 1280px
 * Las media queries viven en base.css y en los CSS por página.
 */