/**
 * Tokens de diseño oficiales — "Industrial Precision".
 * Única fuente de verdad de color, tipografía, forma, espaciado y elevación
 * para las apps PHP (clientes, contacto, formularios-empresas), el admin del
 * plugin `dp` y donde el tema lo permita.
 *
 * CONTRATO (ver shared/docs/API_CONTRACTS.md): renombrar o eliminar una
 * variable es breaking change; añadir no lo es. Las 4 variables de marca del
 * bloque §1 existen desde 2026-07-21 y NO se tocan — hay consumidores que las
 * referencian por nombre.
 *
 * Las apps no redefinen estos valores: los mapean a sus propios nombres
 * internos (ej. formularios-empresas/assets/css/admin-tokens.css).
 */
:root {
    /* ─── §1 Marca (contrato estable, no renombrar) ─────────────────────── */
    --dp-color-navy: #1B263B;
    --dp-color-orange: #F37021;
    --dp-color-marketplace: #0FA2A8;
    --dp-color-cursos: #1574FF;

    /* ─── §2 Acentos por vertical ───────────────────────────────────────── */
    /* El shell es institucional (navy); cada módulo se identifica con su
       acento en el estado activo del nav, el CTA principal y sus badges. */
    --dp-vertical-empresas: var(--dp-color-orange);
    --dp-vertical-empleos: #002B7C;
    --dp-vertical-marketplace: var(--dp-color-marketplace);
    --dp-vertical-cursos: var(--dp-color-cursos);

    /* ─── §3 Escala institucional ───────────────────────────────────────── */
    --dp-navy-900: #0B1628;
    --dp-navy-800: #131E33;
    --dp-navy-700: var(--dp-color-navy);
    --dp-navy-600: #2A3852;
    --dp-navy-500: #3C475D;

    --dp-orange-700: #B84E0E;
    --dp-orange-600: #D9600F;
    --dp-orange-500: var(--dp-color-orange);
    --dp-orange-200: #FBD3BC;
    --dp-orange-100: #FDEAE0;
    /* Tinte más claro que el 100: es el único fondo naranja sobre el que el
       texto en naranja 700 llega a 4,5:1 (con el 100 se queda en 4,36). */
    --dp-orange-50: #FEF5EF;

    /* ─── §4 Neutros y superficies ──────────────────────────────────────── */
    --dp-gray-900: #0B1628;
    --dp-gray-800: #1B1B1D;
    --dp-gray-700: #344054;
    --dp-gray-600: #526176;
    --dp-gray-500: #64748B;
    --dp-gray-400: #9AA8B8;
    --dp-gray-300: #CBD5E1;
    --dp-gray-200: #E2E8F0;
    --dp-gray-100: #F1F4F8;
    --dp-gray-50: #F7F9FB;

    --dp-canvas: var(--dp-gray-50);
    --dp-surface: #FFFFFF;
    --dp-surface-sunken: var(--dp-gray-100);
    --dp-surface-raised: #FFFFFF;

    --dp-ink: var(--dp-gray-900);
    --dp-ink-muted: var(--dp-gray-600);
    --dp-ink-subtle: var(--dp-gray-400);
    --dp-ink-on-dark: #FFFFFF;
    --dp-ink-on-dark-muted: rgba(255, 255, 255, .62);
    --dp-ink-on-dark-subtle: rgba(255, 255, 255, .42);

    --dp-line: var(--dp-gray-200);
    --dp-line-strong: var(--dp-gray-300);
    /* Borde de un control (campo, select, casilla). WCAG 1.4.11 pide 3:1 para
       el límite que identifica al control, así que es más oscuro que --dp-line
       y --dp-line-strong, que separan y decoran pero no identifican nada. */
    --dp-field-border: var(--dp-gray-500);
    --dp-line-on-dark: rgba(255, 255, 255, .10);

    /* ─── §5 Estados semánticos ─────────────────────────────────────────── */
    /* Nunca usar un color de vertical para un estado: el teal de Marketplace
       no significa "correcto". Los badges van con texto en el color y fondo
       en su variante -bg (equivalente al 10% de opacidad del DS). */
    --dp-success: #15803D;
    --dp-success-bg: #ECFDF3;
    --dp-warning: #B45309;
    --dp-warning-bg: #FFF7E6;
    /* 2026-09-15: de #DC2626 a #C81E1E — con el rojo anterior el texto sobre
       --dp-danger-bg se quedaba en 4,41:1. */
    --dp-danger: #C81E1E;
    --dp-danger-bg: #FEF2F2;
    --dp-info: #2563EB;
    --dp-info-bg: #EFF4FF;
    --dp-neutral: var(--dp-gray-600);
    --dp-neutral-bg: var(--dp-gray-100);

    /* ─── §6 Acción ─────────────────────────────────────────────────────── */
    /* Decisión 2026-09-08: la acción primaria es naranja en todas las apps. */
    --dp-action: var(--dp-orange-500);
    --dp-action-hover: var(--dp-orange-600);
    --dp-action-active: var(--dp-orange-700);
    --dp-action-ink: #FFFFFF;
    /* Relleno de la acción cuando lleva texto blanco encima: el naranja 500 de
       marca se queda en 2,9:1 con blanco y no sirve para texto normal. El 500
       sigue siendo el color del acento, el borde y el anillo de foco. */
    --dp-action-strong: var(--dp-orange-700);
    --dp-action-soft-bg: var(--dp-orange-100);
    --dp-focus-ring: rgba(243, 112, 33, .30);
    --dp-focus-ring-width: 2px;
    --dp-focus-ring-offset: 2px;

    /* Enlaces y acentos informativos: siguen siendo azules, no son acción. */
    --dp-link: #1769E6;
    --dp-link-hover: #0F52B0;

    /* ─── §7 Tipografía ─────────────────────────────────────────────────── */
    /* Inter en todo el ecosistema (decisión 2026-09-08). Cada app es
       responsable de cargar la familia; este archivo solo declara la pila. */
    --dp-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dp-font-display: var(--dp-font-sans);
    --dp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --dp-fs-display: 48px;
    --dp-lh-display: 56px;
    --dp-fs-h1: 32px;
    --dp-lh-h1: 40px;
    --dp-fs-h1-mobile: 28px;
    --dp-lh-h1-mobile: 36px;
    --dp-fs-h2: 24px;
    --dp-lh-h2: 32px;
    --dp-fs-h3: 20px;
    --dp-lh-h3: 28px;
    --dp-fs-h4: 18px;
    --dp-lh-h4: 24px;
    --dp-fs-body-lg: 18px;
    --dp-lh-body-lg: 28px;
    --dp-fs-body: 16px;
    --dp-lh-body: 24px;
    /* body-sm es el tamaño por defecto de tablas y metadatos administrativos:
       maximiza datos visibles sin bajar de 14px. */
    --dp-fs-body-sm: 14px;
    --dp-lh-body-sm: 20px;
    --dp-fs-label: 14px;
    --dp-lh-label: 20px;
    --dp-fs-caption: 12px;
    --dp-lh-caption: 16px;
    --dp-fs-overline: 12px;
    --dp-lh-overline: 16px;

    --dp-fw-regular: 400;
    --dp-fw-medium: 500;
    --dp-fw-semibold: 600;
    --dp-fw-bold: 700;

    --dp-tracking-tight: -0.02em;
    --dp-tracking-snug: -0.01em;
    --dp-tracking-normal: 0;
    --dp-tracking-wide: 0.08em;

    /* ─── §8 Forma ──────────────────────────────────────────────────────── */
    --dp-radius-badge: 4px;
    --dp-radius-control: 8px;
    --dp-radius-card: 12px;
    --dp-radius-lg: 16px;
    --dp-radius-xl: 24px;
    --dp-radius-pill: 9999px;
    --dp-border-width: 1px;

    /* ─── §9 Espaciado y layout (ritmo de 4px) ──────────────────────────── */
    --dp-space-1: 4px;
    --dp-space-2: 8px;
    --dp-space-3: 12px;
    --dp-space-4: 16px;
    --dp-space-5: 20px;
    --dp-space-6: 24px;
    --dp-space-8: 32px;
    --dp-space-10: 40px;
    --dp-space-12: 48px;

    --dp-gutter: 24px;
    --dp-page-margin: 32px;
    --dp-page-margin-mobile: 16px;
    --dp-admin-max-width: 1600px;

    --dp-sidebar-width: 248px;
    --dp-sidebar-rail: 64px;
    --dp-topbar-height: 64px;

    --dp-control-height: 44px;
    --dp-control-height-sm: 36px;
    --dp-row-height: 48px;

    /* ─── §10 Elevación ─────────────────────────────────────────────────── */
    /* Nivel 0: tarjetas en reposo — se definen por borde de 1px, no por sombra. */
    --dp-elev-0: none;
    --dp-elev-1: 0 4px 12px rgba(11, 22, 40, .08);
    --dp-elev-2: 0 8px 24px rgba(11, 22, 40, .12);
    --dp-elev-3: 0 24px 60px rgba(11, 22, 40, .22);
    --dp-scrim: rgba(11, 22, 40, .60);

    /* ─── §11 Movimiento ────────────────────────────────────────────────── */
    --dp-duration-instant: 100ms;
    --dp-duration-fast: 160ms;
    --dp-duration-base: 220ms;
    --dp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --dp-ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --dp-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* ─── §12 Slots de logo ─────────────────────────────────────────────── */
    /* La caja existe aunque no haya archivo cargado, para que el layout no
       salte. Hay dos variantes de archivo: sobre oscuro (navy) y sobre claro. */
    --dp-logo-sidebar-h: 64px;
    --dp-logo-sidebar-max-h: 40px;
    --dp-logo-sidebar-max-w: 200px;
    --dp-logo-rail-h: 64px;
    --dp-logo-rail-max: 40px;
    --dp-logo-public-h: 72px;
    --dp-logo-public-max-h: 44px;
    --dp-logo-login-h: 80px;
    --dp-logo-login-max-h: 56px;
    --dp-logo-login-max-w: 240px;
    --dp-logo-doc-max-h: 40px;
}