/**
 * Tokens de diseño — Moni Sarai
 *
 * Portado 1:1 desde el sistema de diseño de Lovable (Tailwind v4 / shadcn).
 * Allí los colores se declaran en `oklch()`; aquí van convertidos a sRGB.
 * Los valores oklch originales quedan en el comentario de cada línea para
 * poder rastrear el origen.
 *
 * Verde = psicología · Azul = implementos deportivos · Durazno = línea deportiva
 * Amarillo y grises como acentos y neutros.
 *
 * Convención de nombres: `--ms-<token>` reproduce el token de Lovable con el
 * mismo significado, para que el CSS portado se lea igual que el JSX original.
 *
 * ⚠ REGLA IMPORTANTE DE ESTE TEMA: nunca usar `rem` en el CSS propio.
 *   OceanWP declara `html { font-size: 62.5% }` (oceanwp/assets/css/style.css,
 *   línea 151), así que en este sitio 1rem = 10px. Los `rem` que vienen de
 *   Tailwind/Lovable están calculados sobre 16px, de modo que al portar hay
 *   que convertirlos: valor_rem × 16 = px. Si se dejan en rem, el componente
 *   se renderiza al 62.5% de su tamaño.
 *   Equivalencias frecuentes: 0.5rem=8 · 0.75rem=12 · 1rem=16 · 1.5rem=24 ·
 *   3.5rem=56 (h-14) · 5rem=80 (h-20) · 72rem=1152 (max-w-6xl).
 */

:root {

	/* --- Tipografía ---------------------------------------------------- */
	--ms-font-display: "Cormorant Garamond", Georgia, serif;
	--ms-font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;

	/* Alias usados por header.css y typography.css. */
	--ms-font-heading: var(--ms-font-display);
	--ms-font-body: var(--ms-font-sans);

	/* --- Radios --------------------------------------------------------- */
	--ms-radius: 4px;                          /* --radius */
	--ms-radius-sm: calc(var(--ms-radius) - 4px);
	--ms-radius-md: calc(var(--ms-radius) - 2px);
	--ms-radius-lg: var(--ms-radius);
	--ms-radius-xl: calc(var(--ms-radius) + 4px);
	--ms-radius-2xl: calc(var(--ms-radius) + 8px);
	--ms-radius-3xl: calc(var(--ms-radius) + 12px);

	/* --- Neutros y superficies ------------------------------------------ */
	--ms-background: #fdfcf8;                      /* oklch(0.99 0.005 90) */
	--ms-foreground: #1f2620;                      /* oklch(0.26 0.015 150) */
	--ms-card: #ffffff;                            /* oklch(1 0 0) */
	--ms-card-foreground: #1f2620;
	--ms-popover: #ffffff;
	--ms-popover-foreground: #1f2620;
	--ms-secondary: #f4f2e9;                       /* oklch(0.96 0.012 95) */
	--ms-secondary-foreground: #2d3c30;            /* oklch(0.34 0.03 150) */
	--ms-muted: #f3f2ec;                           /* oklch(0.96 0.008 95) */
	--ms-muted-foreground: #646b63;                /* oklch(0.52 0.015 140) */
	--ms-accent: #fbe7d8;                          /* oklch(0.94 0.03 60) */
	--ms-accent-foreground: #2d3c30;
	--ms-border: #e0ded5;                          /* oklch(0.9 0.012 95) */
	--ms-input: #e0ded5;
	--ms-ring: #396040;
	--ms-destructive: #e7000b;                     /* oklch(0.577 0.245 27.325) */
	--ms-destructive-foreground: #fdfcf8;

	/* Versiones con alfa que usa el header (border/60, bg/85). */
	--ms-border-60: rgba(224, 222, 213, 0.6);
	--ms-background-85: rgba(253, 252, 248, 0.85);

	/* --- Marca / línea principal ---------------------------------------- */
	--ms-primary: #396040;                         /* oklch(0.45 0.068 149) */
	--ms-primary-foreground: #fdfcf8;

	/* --- Líneas de negocio ---------------------------------------------- */

	/* Verde · psicología */
	--ms-verde: #396040;                           /* oklch(0.45 0.068 149) */
	--ms-verde-soft: #eaf5eb;                      /* oklch(0.96 0.018 149) */
	--ms-verde-ink: #224028;                       /* oklch(0.34 0.055 149) */

	/* Azul · implementos deportivos */
	--ms-azul: #79a7b3;                            /* oklch(0.7 0.052 216) */
	--ms-azul-soft: #e7f5f9;                       /* oklch(0.96 0.016 216) */
	--ms-azul-ink: #375b6a;                        /* oklch(0.45 0.048 226) */

	/* Durazno · línea deportiva */
	--ms-durazno: #e6ab91;                         /* oklch(0.79 0.079 45) */
	--ms-durazno-soft: #feeee4;                    /* oklch(0.96 0.022 55) */
	--ms-durazno-ink: #9e5f46;                     /* oklch(0.55 0.09 42) */

	/* Arte acuático · dorado de marca */
	--ms-arte: #f2cd6f;                            /* oklch(0.86 0.12 88) */
	--ms-arte-soft: #fdf5e0;                       /* oklch(0.97 0.028 88) */
	--ms-arte-ink: #7f5c1d;                        /* oklch(0.5 0.09 78) */

	/* Acentos neutros */
	--ms-amarillo: #f9d46b;                        /* oklch(0.88 0.13 90) */
	--ms-arena: #f3eee4;                           /* oklch(0.95 0.014 85) */

	/* --- Layout ---------------------------------------------------------- */
	--ms-container: 1152px;                         /* max-w-6xl */
	--ms-gutter: 24px;                           /* px-6 */
}