/*
 * TOKENS — la única fuente del color, la tipografía y la escala del tema.
 *
 * MARCA PAULU RENTAL (logo del dueño, 2026-10-22): azul #0242A6 (anillo,
 * «P» y «PAULU RENTAL»), naranja #FF8112 («L», flecha), papel #F8F8F8. El
 * naranja del logo es un color de RELLENO: como texto sobre claro queda en
 * 2.4:1, por eso existen `--t-accent-ink` (naranja quemado, AA) y
 * `--t-accent-deep` (bordes/foco, ≥ 3:1). Sobre el naranja el texto va en
 * tinta azul-negra (`--t-on-accent`, 6.9:1): el blanco sólo llega a 2.5:1.
 * Los archivos del logo viven en assets/brand/ (ver inc/template-tags.php
 * `letsrentcars_wordmark()`). Los tokens del tema son `--t-*` (distinto de
 * los `--lrc-*` del plugin: un `--lrc-x: var(--lrc-x)` sería un ciclo y anula
 * el token). Las vistas de la app (`.lrc-app`) se reasignan a estos tokens en
 * theme.css. La familia `--t-olive*` de la marca anterior queda como pizarra
 * neutra para no romper los componentes que la usan.
 *
 * Modo oscuro: definido pero NO automático. El CSS público del plugin tiene
 * ~50 colores escritos a mano (tarjetas blancas, chips de estado) y seguir
 * `prefers-color-scheme` dejaría la mitad de la página clara y la otra
 * oscura. Se activa a propósito con `<html data-theme="dark">`, o en todo el
 * sitio con la opción `lrc_theme_auto_dark` cuando el plugin esté tokenizado.
 */

/* Respaldos con métricas ajustadas: evitan el salto cuando llega la fuente. */
@font-face {
	font-family: "Montserrat Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 112%;
	ascent-override: 87%;
	descent-override: 22%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Jakarta Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 102%;
	ascent-override: 100%;
	descent-override: 28%;
	line-gap-override: 0%;
}
:root {
	color-scheme: light;

	/* Color — primario (azul del logo), acento (naranja de la «L» y la flecha), pizarra (ex oliva), neutros (papel). */
	--t-primary: #0242A6;
	--t-primary-strong: #02348A;
	--t-primary-soft: #E6ECF7;
	--t-accent: #FF8112;        /* relleno de señalización, nunca texto sobre claro (2.4:1) */
	--t-accent-ink: #AD5200;    /* el acento cuando es TEXTO (5.0:1 sobre papel, 4.8:1 sobre el tint) */
	--t-accent-deep: #D96A05;   /* bordes finos y anillo de foco sobre claro (3.3:1) */
	--t-on-accent: #0E1C27;     /* tinta sobre naranja: 6.9:1 (blanco daría 2.5:1) */
	--t-on-primary: #FFFFFF;
	--t-brand: #0242A6;         /* superficie de marca (hero, pie): azul en los DOS modos */
	--t-on-brand: #FFFFFF;
	--t-on-brand-soft: rgba(255, 255, 255, .86);
	--t-accent-on-brand: #FFB266; /* naranja como TEXTO sobre el azul de marca (5.1:1); el del logo da 3.6:1 */
	--t-olive: #6B7280;         /* pizarra: superficies secundarias e ilustración, no texto */
	--t-olive-ink: #4B5563;     /* la pizarra cuando es texto (6.7:1 sobre su tint) */
	--t-olive-tint: #EEF1F6;

	--t-bg: #F8F8F8;
	--t-surface: #FFFFFF;
	--t-surface-alt: #EDF0F5;
	--t-ink: #10203A;
	--t-muted: #55627A;
	--t-faint: #5E6B7E;
	--t-line: #D9DEE8;
	--t-line-strong: #B5BECE;

	--t-good: #1F7A4D;
	--t-danger: #B42318;
	--t-warn: #8A5A00;
	--t-accent-tint: #FFF1E6;   /* fondo «hoy pagás» / estado por hacer */
	--t-good-tint: #E7F5EC;     /* fondo «confirmada» */
	--t-info: var(--t-primary);

	--t-btn-bg: var(--t-primary);
	--t-btn-ink: var(--t-on-primary);
	--t-btn-bg-hover: var(--t-primary-strong);
	--t-focus: #D96A05;

	/*
	 * Tipografía — DOS familias: Montserrat (títulos; geométrica como el
	 * «PAULU» del logotipo) y Plus Jakarta Sans (texto). Google Fonts con
	 * display=swap y preconnect; los respaldos llevan métricas ajustadas para
	 * que el cambio de fuente no mueva el texto.
	 */
	--t-font-display: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--t-font-body: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--t-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Escala: 13 · 15 · 17 (texto) · 20 · 26 · pantalla (32→44) · hero (34→54). Montserrat es ancha: la escala baja respecto a la condensada anterior. */
	--t-text-xs: 0.8125rem;
	--t-text-sm: 0.9375rem;
	--t-text-md: 1.0625rem;
	--t-text-lg: 1.25rem;
	--t-text-xl: 1.625rem;
	--t-text-2xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
	--t-text-3xl: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
	--t-text-4xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* hero */
	--t-leading: 1.6;
	--t-leading-tight: 1.05;
	--t-track-tight: -0.01em;
	--t-track-display: -0.025em;  /* Montserrat ancha: a tamaños grandes se aprieta */
	--t-ease: cubic-bezier(.2, .7, .2, 1);
	--t-dur: .22s;

	/* Espaciado, radios, sombra, contenedor. */
	--t-space-1: 4px;
	--t-space-2: 8px;
	--t-space-3: 12px;
	--t-space-4: 16px;
	--t-space-5: 20px;
	--t-space-6: 24px;
	--t-space-8: 32px;
	--t-space-10: 40px;
	--t-space-12: 48px;
	--t-space-16: 64px;
	--t-space-20: 80px;
	--t-space-24: 96px;
	--t-radius-lg: 24px;
	--t-radius: 16px;
	--t-radius-sm: 10px;
	--t-radius-xs: 6px;
	--t-radius-pill: 999px;
	--t-shadow: 0 1px 2px rgba(2, 66, 166, .07), 0 1px 3px rgba(2, 66, 166, .05);
	--t-shadow-md: 0 6px 18px rgba(2, 66, 166, .12);
	--t-shadow-lg: 0 18px 44px rgba(2, 66, 166, .20);
	--t-container: 1140px;
	--t-gutter: 16px;
	--t-tap: 44px;
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--t-primary: #8FB3F0;
	--t-primary-strong: #B3CBF5;
	--t-primary-soft: #13295A;
	--t-accent: #FF8112;
	--t-accent-ink: #FFA24D;
	--t-accent-deep: #FF8112;
	--t-on-accent: #07152E;
	--t-on-primary: #07152E;
	--t-brand: #0242A6;
	--t-on-brand: #FFFFFF;
	--t-on-brand-soft: rgba(255, 255, 255, .86);
	--t-accent-on-brand: #FFB266;
	--t-olive: #6B7280;
	--t-olive-ink: #C3CAD6;
	--t-olive-tint: #16264A;

	--t-bg: #07152E;
	--t-surface: #0C2047;
	--t-surface-alt: #13295A;
	--t-ink: #F1F3F5;
	--t-muted: #B9C3D3;
	--t-faint: #A7B2C4;
	--t-line: #203A6E;
	--t-line-strong: #34508A;

	--t-good: #7FD9A3;
	--t-danger: #F7A39B;
	--t-warn: #F0C070;
	--t-accent-tint: #3A2410;
	--t-good-tint: #16352A;
	--t-info: var(--t-primary);

	--t-btn-bg: #FF8112;
	--t-btn-ink: #07152E;
	--t-btn-bg-hover: #F07200;
	--t-focus: #FFA24D;

	--t-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	--t-shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
	--t-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
}