/* ==========================================================================
   CumpleTech · Tokens de marca
   Paleta tomada del logo: navy #002274, cyan #00B4FC, rojo #F61800,
   durazno #FCB484. Cambiar la marca es cambiar este archivo.
   ========================================================================== */

:root {
	/* --- Marca --- */
	--ct-navy: #002274;
	--ct-navy-900: #001541;
	--ct-navy-800: #001b5c;
	--ct-navy-700: #002f96;
	--ct-navy-600: #1a44a8;
	--ct-navy-100: #e6ebf7;
	--ct-navy-50: #f2f5fc;

	--ct-blue: #00b4fc;
	--ct-blue-600: #009ada;
	--ct-blue-100: #dff4ff;

	--ct-red: #f61800;
	--ct-red-600: #d31400;
	--ct-red-100: #ffe6e2;

	/* Naranjo: color de acento del sitio. Vive en el degradado del logo,
	   entre el rojo y el durazno. Es lo que destaca sobre el navy. */
	--ct-orange: #ff6a1f;
	--ct-orange-600: #e4550b;
	--ct-orange-300: #ffa06b;
	--ct-orange-100: #ffeee3;

	--ct-peach: #fcb484;
	--ct-peach-100: #fff0e5;

	/* --- Neutros --- */
	--ct-ink: #0d1526;
	--ct-body: #414c63;
	--ct-muted: #6a7488;
	--ct-line: #dde3ee;
	--ct-line-soft: #eaeef6;
	--ct-bg: #f5f7fb;
	--ct-bg-alt: #eef2f9;
	--ct-card: #ffffff;

	/* --- Estados --- */
	--ct-success: #16a34a;
	--ct-warning: #d97706;
	--ct-danger: var(--ct-red);

	/* --- Gradientes de marca --- */
	--ct-grad-brand: linear-gradient(135deg, var(--ct-navy) 0%, var(--ct-navy-700) 55%, var(--ct-blue) 100%);
	--ct-grad-warm: linear-gradient(135deg, var(--ct-red) 0%, var(--ct-orange) 55%, var(--ct-peach) 100%);
	--ct-grad-accent: linear-gradient(90deg, var(--ct-orange) 0%, var(--ct-peach) 100%);

	/* --- Tipografía ---
	   Plus Jakarta Sans sostiene todo: texto, interfaz y titulares.
	   `--ct-font-display` existe para los titulares y las citas; hoy apunta a
	   la misma familia. Para volver al serif basta con devolverle la línea
	   comentada de abajo y reponer Fraunces en inc/enqueue.php. */
	--ct-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ct-font-display: var(--ct-font);
	/* --ct-font-display: "Fraunces", Georgia, "Times New Roman", serif; */

	--ct-fs-xs: 0.75rem;    /* 12 */
	--ct-fs-sm: 0.875rem;   /* 14 */
	--ct-fs-base: 1rem;     /* 16 */
	--ct-fs-md: 1.0625rem;  /* 17 */
	--ct-fs-lg: 1.25rem;    /* 20 */
	--ct-fs-xl: 1.5rem;     /* 24 */
	--ct-fs-2xl: 1.875rem;  /* 30 */
	--ct-fs-3xl: 2.25rem;   /* 36 */
	--ct-fs-4xl: 2.75rem;   /* 44 */
	--ct-fs-5xl: 3.25rem;   /* 52 */

	--ct-lh-tight: 1.15;
	--ct-lh-snug: 1.35;
	--ct-lh-base: 1.65;

	/* --- Espaciado --- */
	--ct-space-1: 4px;
	--ct-space-2: 8px;
	--ct-space-3: 12px;
	--ct-space-4: 16px;
	--ct-space-5: 24px;
	--ct-space-6: 32px;
	--ct-space-7: 48px;
	--ct-space-8: 64px;
	--ct-space-9: 96px;

	--ct-section-y: clamp(56px, 7vw, 104px);
	--ct-container: 1180px;
	--ct-container-narrow: 860px;
	--ct-gutter: clamp(20px, 4vw, 40px);

	/* --- Formas --- */
	--ct-r-sm: 12px;
	--ct-r-md: 18px;
	--ct-r-lg: 26px;
	--ct-r-xl: 36px;
	--ct-r-pill: 999px;

	/* --- Sombras --- */
	--ct-shadow-sm: 0 2px 10px rgba(0, 34, 116, 0.05);
	--ct-shadow-md: 0 10px 30px rgba(0, 34, 116, 0.08);
	--ct-shadow-lg: 0 24px 60px rgba(0, 34, 116, 0.13);
	--ct-shadow-header: 0 2px 16px rgba(0, 34, 116, 0.08);
	--ct-shadow-accent: 0 8px 22px rgba(255, 106, 31, 0.28);

	/* --- Header --- */
	--ct-header-h: 76px;

	/* --- Transiciones --- */
	--ct-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ct-t-fast: 0.16s var(--ct-ease);
	--ct-t-base: 0.26s var(--ct-ease);
}

@media (max-width: 900px) {
	:root {
		--ct-header-h: 64px;
	}
}