/**
 * Multicines PWA — mcp-tokens.css
 *
 * v0.2.0 (D2.1): tokens de diseño extraídos de src/utils/Theme.tsx y de los estilos reales de
 * las pantallas del fuente RN (conteos en docs/TOKENS.md). Dos capas:
 *
 *   1. PRIMITIVOS  (--mcp-p-*): valores crudos. Los de color son LITERALES de Theme.tsx; el
 *      comentario de cada uno dice la clave original. Los marcados "(ajuste AA)" no existen en
 *      Theme.tsx: son variantes para cumplir contraste WCAG AA donde el original no llega
 *      (mejora propuesta, ver docs/TOKENS.md sección 3).
 *   2. SEMÁNTICOS  (--mcp-*): lo que usan los componentes. Nunca se usa un primitivo directo
 *      en un componente. Cambian según el tema:
 *        .mcp-tema-claro  -> FIEL a la app RN (fondos blancos, header y botones morados,
 *                            pestaña activa naranja). Verificado en el fuente.
 *        .mcp-tema-oscuro -> PROPUESTA del kit de arranque ("tema oscuro de cine"), usando los
 *                            grises #292929 / #252525 que Theme.tsx define pero ninguna
 *                            pantalla usa.
 *
 * Tipografía: los inputs del RN piden fontFamily "Touche", pero esa fuente NO está empacada en
 * el fuente (ni en ios/Info.plist ni en android/assets), así que la app real usa la fuente del
 * sistema. Aquí se usa la pila de fuentes del sistema: fiel y sin descargas.
 *
 * Tamaños: el RN escala todo con normalize.ts (ancho base 414 px). En web se usan rem fijos
 * redondeados a partir de los valores más usados en el fuente.
 */

:root {
	/* ── 1. PRIMITIVOS: color (Theme.tsx) ─────────────────────────────── */
	--mcp-p-morado-500: #672e86;       /* boardPrimary, boardSecondry, btnPrimary, btnSecondry */
	--mcp-p-morado-600: #5e2a7a;       /* (ajuste) morado presionado / hover */
	--mcp-p-morado-300: #c39ddb;       /* (ajuste AA) morado legible sobre fondo oscuro, 6.35:1 sobre #292929 */
	--mcp-p-naranja-500: #f79520;      /* btnSecondaryLight */
	--mcp-p-naranja-400: #eb9b3b;      /* orangeLight */
	--mcp-p-naranja-700: #d96c34;      /* orangeDark */
	--mcp-p-naranja-texto: #b35f00;    /* (ajuste AA) naranja como texto sobre blanco, 4.61:1 */
	--mcp-p-naranja-suave: #f7952073;  /* lightSecondary */
	--mcp-p-amarillo-500: #ffce00;     /* yellow */
	--mcp-p-amarillo-400: #e4b802;     /* yellowLight */
	--mcp-p-amarillo-600: #dfb300;     /* yellowDark */
	--mcp-p-rojo-500: #ec2228;         /* red */
	--mcp-p-rojo-400: #fa3d30;         /* redLight */
	--mcp-p-rojo-600: #d3483e;         /* redDark */
	--mcp-p-rojo-texto: #c81d23;       /* (ajuste AA) error sobre blanco, 5.74:1 */
	--mcp-p-rojo-claro: #ff8286;       /* (ajuste AA, v0.2.3) error sobre oscuro: 4.76:1 sobre #3a3a3a (modal) y 6.42:1 sobre #252525. Antes #ff5a5f daba 3.73 en el modal */
	--mcp-p-verde-500: #039b00;        /* green */
	--mcp-p-verde-texto: #027a00;      /* (ajuste AA) éxito sobre blanco, 5.55:1 */
	--mcp-p-verde-claro: #3ccf3a;      /* (ajuste AA) éxito sobre oscuro, 7.05:1 */
	--mcp-p-blanco: #ffffff;           /* white (en el fuente "#ffff") */
	--mcp-p-negro: #000000;            /* black */
	--mcp-p-gris-950: #252525;         /* blackLight */
	--mcp-p-gris-900: #292929;         /* bgDark */
	--mcp-p-gris-800: #3a3a3a;         /* (ajuste) superficie elevada en tema oscuro */
	--mcp-p-gris-500: #808080;         /* grey ("grey" en el fuente) */
	--mcp-p-gris-texto: #6b6b6b;       /* (ajuste AA) texto secundario sobre blanco, 5.33:1 (grey da 3.95) */
	--mcp-p-gris-placeholder: #858c94; /* placeholderCol */
	--mcp-p-gris-placeholder-aa: #767676; /* (ajuste AA, v0.2.4) placeholder sobre blanco, 4.54:1. El RN usa Theme.grey #808080 (3.95), no placeholderCol (hallazgo de la QA de identidad). */
	--mcp-p-gris-borde-claro: #8a8a8a;  /* (ajuste AA, v0.2.1) borde de controles sobre blanco, 3.45:1 (greyLight da 1.41) */
	--mcp-p-gris-borde-oscuro: #8c8c8c; /* (ajuste AA, v0.2.1) borde de controles sobre #292929, 4.33:1 */
	--mcp-p-gris-300: #d9d9d9;         /* greyLight */
	--mcp-p-gris-200: #e8e8e8;         /* greyLight2 */
	--mcp-p-gris-100: #f4f4f4;         /* (ajuste) fondo alterno en tema claro */
	--mcp-p-blanco-10: rgba(255, 255, 255, 0.1); /* whiteLight */
	--mcp-p-azul-30: rgba(41, 114, 254, 0.3);    /* blue */
	--mcp-p-velo: rgba(0, 0, 0, 0.59);           /* "#00000096" (overlays de carga en Payment/SelectSeats) */

	/* ── 1. PRIMITIVOS: tipografía ────────────────────────────────────── */
	--mcp-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Escala: tamaños más usados en el fuente (fontSize / fontPixel): 14, 15, 16, 18, 20, 22, 28-29. */
	--mcp-texto-xs: 0.75rem;   /* 12 px — X12 */
	--mcp-texto-sm: 0.875rem;  /* 14 px — X14, errores de formulario */
	--mcp-texto-md: 0.9375rem; /* 15 px — datos de tarjeta (FilmDetailedCard), inputs */
	--mcp-texto-base: 1rem;    /* 16 px — X16, el más usado en valores fijos */
	--mcp-texto-lg: 1.125rem;  /* 18 px — X18, el más usado con fontPixel */
	--mcp-texto-xl: 1.25rem;   /* 20 px — X20, texto de botón, título de película */
	--mcp-texto-2xl: 1.375rem; /* 22 px — X22 */
	--mcp-texto-3xl: 1.75rem;  /* 28 px — título del Login (fontPixel 29) */
	--mcp-texto-4xl: 1.875rem; /* 30 px — v0.2.4: título de Onboarding (fontPixel 32 = 30 en 390x844) */
	--mcp-peso-normal: 400;
	--mcp-peso-medio: 500;     /* "500": 17 usos */
	--mcp-peso-semi: 600;      /* "600": 37 usos, el más usado */
	--mcp-peso-bold: 700;      /* "700" / "bold" */
	--mcp-peso-black: 900;     /* "900": títulos grandes (Login) */
	--mcp-interlineado: 1.4;
	--mcp-interlineado-titulo: 1.2;

	/* ── 1. PRIMITIVOS: espaciado (padding/margin del fuente: 10 x56, 20 x38, 5 x34, 7, 2, 40) ── */
	--mcp-esp-0: 0;
	--mcp-esp-1: 0.125rem; /* 2 px */
	--mcp-esp-2: 0.3125rem; /* 5 px */
	--mcp-esp-3: 0.625rem; /* 10 px — el más usado */
	--mcp-esp-4: 0.9375rem; /* 15 px */
	--mcp-esp-5: 1.25rem;  /* 20 px */
	--mcp-esp-6: 1.875rem; /* 30 px */
	--mcp-esp-7: 2.5rem;   /* 40 px */
	--mcp-gutter: 1rem;    /* (mejora) margen lateral de pantalla en web; el RN usa porcentajes 3%-8% */

	/* ── 1. PRIMITIVOS: radios (borderRadius del fuente: 10 x18, 20 x8, 7 x6, 15 x4, 5 x3) ── */
	--mcp-radio-sm: 5px;
	--mcp-radio-md: 7px;
	--mcp-radio-lg: 10px;  /* botones, inputs, pósters — el más usado */
	--mcp-radio-xl: 15px;  /* barra de pestañas y píldora activa (TabNav.tsx) */
	--mcp-radio-2xl: 20px;
	--mcp-radio-pill: 999px;

	/* ── 1. PRIMITIVOS: medidas de componentes ────────────────────────── */
	--mcp-alto-boton: 3.4375rem;  /* 55 px — Buttons.tsx:77 heightPixel(58) en el teléfono de referencia 390x844 (v0.2.4: antes 52) */
	--mcp-alto-input: 3.125rem;   /* 50 px — Dropdown.tsx:60 height 50 (v0.2.6; antes 48) */
	/* v0.2.4 (D2.5): Header.tsx:124 usa heightPixel(80) = 75 px en 390x844 y el título fontPixel(28).
	   Se reproduce la escala del RN con clamp(): crece con el ancho y se topa en el valor del diseño. */
	--mcp-alto-header: clamp(3.5rem, 19.2vw, 4.6875rem);   /* 56 -> 75 px */
	--mcp-texto-header: clamp(1.25rem, 6.7vw, 1.625rem);   /* 20 -> 26 px */
	--mcp-alto-tabbar: 4.6875rem; /* 75 px — TabNav.tsx:32 heightPixel(80) en 390x844 (v0.2.4: antes 72) */
	--mcp-ancho-pestana: 150px;   /* TabNav.tsx:56 (medida fija en el RN) */
	--mcp-alto-pestana: 50px;     /* TabNav.tsx:57 */
	--mcp-ancho-logo: 180px;      /* Header.tsx:129 */
	--mcp-tamano-casilla: 30px;   /* Checkbox.tsx:20 */
	--mcp-ancho-app: 480px;       /* (mejora) ancho máximo en computadora */
	--mcp-poster-ancho: 115px;    /* FilmDetailedCard img 115x175 */
	--mcp-poster-alto: 175px;
	--mcp-tactil-min: 44px;       /* (mejora) área táctil mínima */

	/* ── 1. PRIMITIVOS: sombras, capas y movimiento ───────────────────── */
	--mcp-sombra-flotante: 0 0 10px rgba(0, 0, 0, 0.2); /* TabNav.tsx: shadowRadius 10, opacity 0.2 */
	--mcp-sombra-tarjeta: 0 2px 8px rgba(0, 0, 0, 0.12);
	--mcp-z-header: 50;
	--mcp-z-tabbar: 50;
	--mcp-z-modal: 200;
	--mcp-z-loader: 100000;
	--mcp-transicion: 0.18s ease;
	--mcp-opacidad-deshabilitado: 0.5;  /* v0.2.1 */
}

/* ── 2. SEMÁNTICOS: tema CLARO (fiel a la app RN) ───────────────────── */
.mcp-tema-claro {
	--mcp-fondo: var(--mcp-p-blanco);                 /* Home, SelectSeats, Profile, History: backgroundColor Theme.white */
	--mcp-fondo-alterno: var(--mcp-p-gris-100);
	--mcp-superficie: var(--mcp-p-blanco);            /* tarjetas (FilmDetailedCard mainView) */
	--mcp-superficie-elevada: var(--mcp-p-blanco);
	--mcp-borde: var(--mcp-p-gris-300);               /* divisores decorativos: greyLight */
	--mcp-borde-control: var(--mcp-p-gris-borde-claro); /* v0.2.1 (mejora AA 1.4.11): bordes de inputs y casillas */
	--mcp-texto: var(--mcp-p-negro);                  /* textos: Theme.black */
	--mcp-texto-secundario: var(--mcp-p-gris-texto);  /* Theme.grey, ajustado a AA */
	--mcp-texto-placeholder: var(--mcp-p-gris-placeholder-aa); /* v0.2.3: placeholderCol no llega a AA */
	--mcp-texto-destacado: var(--mcp-p-morado-500);   /* título de película, datos de tarjeta */
	--mcp-primario: var(--mcp-p-morado-500);          /* botones, header, íconos */
	--mcp-primario-hover: var(--mcp-p-morado-600);
	--mcp-primario-texto: var(--mcp-p-morado-500);    /* v0.2.1: morado como texto o borde (botón secundario) */
	--mcp-sobre-primario: var(--mcp-p-blanco);
	--mcp-acento: var(--mcp-p-naranja-500);           /* pestaña activa, botones de onboarding */
	--mcp-sobre-acento: var(--mcp-p-gris-950);        /* (mejora AA) el RN usa blanco sobre naranja: 2.26:1 */
	--mcp-acento-texto: var(--mcp-p-naranja-texto);
	--mcp-acento-sobre-marca: var(--mcp-p-naranja-500); /* v0.2.4: naranja sobre el morado/oscuro de marca (botón "Omitir" de NotificationEnable). Solo sobre --mcp-marca-fondo. */
	--mcp-header-fondo: var(--mcp-p-morado-500);      /* Header.tsx: gradiente boardSecondry -> boardPrimary (mismo color) */
	--mcp-header-texto: var(--mcp-p-blanco);
	--mcp-tabbar-fondo: var(--mcp-p-blanco);          /* TabNav.tsx: backgroundColor white, flotante */
	--mcp-tabbar-texto: var(--mcp-p-morado-500);
	--mcp-tabbar-activa-fondo: var(--mcp-p-naranja-500);
	--mcp-tabbar-activa-texto: var(--mcp-p-gris-950); /* (mejora AA) */
	--mcp-error: var(--mcp-p-rojo-texto);
	--mcp-exito: var(--mcp-p-verde-texto);
	--mcp-aviso: var(--mcp-p-amarillo-500);
	/* v0.2.3 (D2.4): foco de DOS anillos. El naranja sobre blanco da 2.26:1 y no cumple 1.4.11 (hallazgo
	   de la auditoría); el anillo externo pasa a morado (9.08:1) y el interno blanco separa el anillo de
	   botones morados o naranjas. Ver docs/ACCESIBILIDAD.md. */
	--mcp-foco: var(--mcp-p-morado-500);
	--mcp-foco-interno: var(--mcp-p-blanco);
	--mcp-foco-marca: var(--mcp-p-blanco);            /* v0.2.3: foco sobre fondos de marca (header, Bienvenida) */
	--mcp-foco-marca-interno: var(--mcp-p-gris-950);
	--mcp-velo: var(--mcp-p-velo);
	--mcp-marca-fondo: var(--mcp-p-morado-500);       /* AppGradient.tsx: Splash, Onboarding, NotificationEnable */
	--mcp-sobre-marca: var(--mcp-p-blanco);           /* v0.2.3: texto sobre --mcp-marca-fondo */
	color-scheme: light;
}

/* ── 2. SEMÁNTICOS: tema OSCURO (propuesta del kit) ─────────────────── */
.mcp-tema-oscuro {
	--mcp-fondo: var(--mcp-p-gris-950);
	--mcp-fondo-alterno: var(--mcp-p-gris-900);
	--mcp-superficie: var(--mcp-p-gris-900);
	--mcp-superficie-elevada: var(--mcp-p-gris-800);
	--mcp-borde: var(--mcp-p-blanco-10);
	--mcp-borde-control: var(--mcp-p-gris-borde-oscuro);
	--mcp-texto: var(--mcp-p-blanco);
	--mcp-texto-secundario: var(--mcp-p-gris-300);
	--mcp-texto-placeholder: #9e9e9e;
	--mcp-texto-destacado: var(--mcp-p-naranja-500);  /* el morado no llega a AA sobre oscuro (1.69:1) */
	--mcp-primario: var(--mcp-p-morado-500);          /* como FONDO de botón sigue funcionando: blanco encima 9.08:1 */
	--mcp-primario-hover: var(--mcp-p-morado-600);
	--mcp-primario-texto: var(--mcp-p-morado-300);    /* v0.2.1: el morado 500 como texto sobre oscuro da 1.69:1 */
	--mcp-sobre-primario: var(--mcp-p-blanco);
	--mcp-acento: var(--mcp-p-naranja-500);
	--mcp-sobre-acento: var(--mcp-p-gris-950);
	--mcp-acento-texto: var(--mcp-p-naranja-500);
	--mcp-acento-sobre-marca: var(--mcp-p-naranja-500); /* v0.2.4: naranja sobre el morado/oscuro de marca (botón "Omitir" de NotificationEnable). Solo sobre --mcp-marca-fondo. */
	--mcp-header-fondo: var(--mcp-p-gris-900);
	--mcp-header-texto: var(--mcp-p-blanco);
	--mcp-tabbar-fondo: var(--mcp-p-gris-900);
	--mcp-tabbar-texto: var(--mcp-p-gris-300);
	--mcp-tabbar-activa-fondo: var(--mcp-p-naranja-500);
	--mcp-tabbar-activa-texto: var(--mcp-p-gris-950);
	--mcp-error: var(--mcp-p-rojo-claro);
	--mcp-exito: var(--mcp-p-verde-claro);
	--mcp-aviso: var(--mcp-p-amarillo-500);
	--mcp-foco: var(--mcp-p-naranja-500);             /* 7.9:1 sobre #252525 */
	--mcp-foco-interno: var(--mcp-p-gris-950);
	--mcp-foco-marca: var(--mcp-p-blanco);
	--mcp-foco-marca-interno: var(--mcp-p-gris-950);
	--mcp-velo: var(--mcp-p-velo);
	--mcp-marca-fondo: var(--mcp-p-gris-950);
	--mcp-sobre-marca: var(--mcp-p-blanco);
	color-scheme: dark;
}