/*!
 * smc-ui/tokens.css · identidad "Carta de autor" para pacientes.saracosme.com
 * (portal de la paciente, /acceso/, /registro/ y la Cabina). 25-oct-2026.
 *
 * Misma marca que saracosme.com (marca/carta.css) y la reserva de citas:
 * crema, oliva y café del menú 2026-2027; Cormorant Garamond + Jost;
 * botones rectos (2 px) y sin sombras. Sin rosa ni burdeos.
 *
 * Tres capas, de abajo hacia arriba:
 *   1. Marca (--c-*, --f-*): los mismos nombres y valores que carta.css.
 *   2. Interfaz (--sm-*): el papel de cada color en una app (fondo, tinta,
 *      acento, estados). Es lo que deben usar las hojas nuevas.
 *   3. Alias de los cuatro dialectos que ya existían (--smc-*, --smcp-*,
 *      --smci-* y los nombres cortos de la Cabina). Cada hoja vieja los
 *      declara apuntando a --sm-* con un valor de respaldo, así que ningún
 *      selector cambia de nombre y la página se ve bien aunque esta hoja
 *      no cargue (p. ej. desde la caché sin conexión del portal).
 *
 * Contraste WCAG medido (texto normal, AA = 4.5):
 *   café #2E2A24 sobre crema 13.7 · sobre lienzo 12.8
 *   tinta-2 #4F4739 sobre lienzo 8.2 · sobre hundido 7.7
 *   tinta-3 #6F6656 sobre lienzo 5.1 · sobre hundido 4.7 · sobre tinte 4.9
 *   oliva-hondo #6B5A2E sobre crema 6.5 · sobre tinte 5.8 · blanco sobre él 6.7
 *   oliva #866F3B sobre crema 4.65, pero sobre lienzo 4.3: solo títulos
 *     de 18 px o más, íconos, barras y rellenos. Texto chico → oliva-hondo.
 *   ok #4F5B3E sobre su tinte 6.1 · aviso #875A12 sobre su tinte 5.1 ·
 *   peligro #A0522D sobre su tinte 4.65 (y 5.5 en #8F4A28 para texto chico).
 *   Borde de campo #9C8F76 sobre blanco 3.2 (1.4.11, 3:1).
 */

:root {
	/* 1 · Marca (idéntico a marca/carta.css) */
	--c-crema: #FFFAF3;        /* papel */
	--c-lienzo: #F8F2E8;       /* fondo alterno */
	--c-arena: #E9DFCC;        /* filetes y bordes */
	--c-oliva: #866F3B;        /* marca; texto ≥ 18 px o íconos */
	--c-oliva-hondo: #6B5A2E;  /* botón de marca, enlaces */
	--c-oro-claro: #C9B27A;    /* ornamento sobre oscuro */
	--c-cafe: #2E2A24;         /* texto principal y superficie Signature */
	--c-tinta-2: #4F4739;      /* texto secundario */
	--c-tinta-3: #6F6656;      /* notas */
	--c-salvia: #4F5B3E;       /* ok */
	--c-terracota: #A0522D;    /* error */
	--f-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
	--f-texto: 'Jost', 'Helvetica Neue', Arial, system-ui, sans-serif;

	/* 2 · Interfaz */
	--sm-canvas: var(--c-lienzo);       /* fondo de apps y flujos */
	--sm-paper: var(--c-crema);         /* tarjetas */
	--sm-surface: #FFFFFF;              /* campos, hojas y tarjetas sobre crema */
	--sm-sunk: #F1EADD;                 /* segmentos, filas hundidas */
	--sm-line: var(--c-arena);          /* bordes de 1 px */
	--sm-line-soft: #F1EADD;            /* separadores internos */
	--sm-line-strong: #9C8F76;          /* borde de campo (3:1) */
	--sm-ink: var(--c-cafe);
	--sm-ink-hover: #3D372F;
	--sm-ink-deep: #24211C;
	--sm-ink-2: var(--c-tinta-2);
	--sm-ink-3: var(--c-tinta-3);
	--sm-off: #A39A88;                  /* deshabilitado (no es texto que se lea) */
	--sm-olive: var(--c-oliva);
	--sm-olive-deep: var(--c-oliva-hondo);
	--sm-olive-light: var(--c-oro-claro);
	--sm-olive-tint: #F3EDDF;
	--sm-olive-line: #DCCFAF;           /* borde de lo seleccionado o resaltado */
	--sm-ok: var(--c-salvia);
	--sm-ok-deep: #3F4A31;
	--sm-ok-tint: #E9ECE0;
	--sm-ok-line: #CDD3BF;
	--sm-warn: #875A12;
	--sm-warn-tint: #F8ECD6;
	--sm-danger: var(--c-terracota);
	--sm-danger-deep: #8F4A28;
	--sm-danger-tint: #F6E7DC;
	--sm-danger-line: #E6CBB8;
	--sm-night: var(--c-tinta-2);       /* rutina de noche (antes ciruela) */
	--sm-night-tint: #EFEAE1;
	--sm-info: var(--c-oliva-hondo);    /* citas e informativos (antes azul) */
	--sm-info-tint: #FAF6EE;
	--sm-wa: var(--c-salvia);           /* WhatsApp: el ícono lo identifica */
	--sm-series-a: var(--c-oliva);      /* gráficas: cabina */
	--sm-series-b: var(--c-cafe);       /* gráficas: portal (2.95:1 contra el oliva) */

	--sm-serif: var(--f-display);
	--sm-sans: var(--f-texto);

	/* Forma: botones, campos y chips rectos; tarjetas y hojas apenas suaves */
	--sm-r: 2px;
	--sm-r-card: 4px;
	--sm-r-round: 999px;                /* solo interruptores, puntos y avatares */
	--sm-shadow: none;                  /* sin sombras: borde arena */
	--sm-shadow-float: 0 18px 48px -20px rgba(46, 42, 36, .28); /* hojas y avisos que flotan */
	--sm-ease: cubic-bezier(.2, .7, .2, 1);
	--sm-focus: 0 0 0 3px rgba(134, 111, 59, .28);
}