/* ==========================================================================
   P6 · Tokens de diseño D'Orygin (Fase 1, 2026-11-09)
   Fuente única de color, tipografía, espacio, radio y sombra.

   Cómo se construyó: se midió en el navegador el valor que GANA hoy cada variable
   en las 20 páginas V7 (claro y oscuro). Los --dg-* reproducen esos valores exactos,
   así que cargar este archivo no cambia nada visible.

   Paso 1 (este archivo): las variables heredadas de las páginas con menú lateral
   apuntan a los --dg-*. Desde aquí se cambia el color de todo el panel.
   Login y Mi suscripción usan hoy otra paleta y quedan fuera a propósito
   (ver «Decisiones pendientes» al final).
   No usar valores sueltos en CSS nuevo: usar siempre --dg-*.
   ========================================================================== */

:root {
    /* Tinta y superficies */
    --dg-ink: #24182e;               /* texto principal */
    --dg-ink-muted: #62536e;         /* texto secundario (contraste 7.1:1 sobre blanco) */
    --dg-paper: #fff;                /* tarjetas y paneles */
    --dg-canvas: #f8f3f8;            /* fondo de página */
    --dg-surface-raised: #f6f7fb;    /* superficies elevadas y fondos de campo */

    /* Líneas */
    --dg-line: #e6dce9;              /* bordes de tarjeta */
    --dg-line-cool: #dedee8;         /* bordes de tabla y campos (ver pendiente 1) */
    --dg-line-control: #a899b2;      /* borde de controles */
    --dg-line-brand: rgba(141, 24, 209, .22);

    /* Marca */
    --dg-brand: #8619bc;
    --dg-brand-hover: #68148f;
    --dg-brand-soft: #f5eafa;
    --dg-brand-alt: #7828a8;         /* morado de navegación y foco (ver pendiente 2) */
    --dg-pink: #e52d7d;
    --dg-gradient: linear-gradient(110deg, #b51b80, #8619bc);
    --dg-gradient-hover: linear-gradient(110deg, #9c156e, #6f139f);
    --dg-gradient-soft: linear-gradient(135deg, rgba(229, 45, 125, .08), rgba(141, 24, 209, .08));

    /* Estados (positivo es morado por decisión de marca: sin verde) */
    --dg-positive: #7620b0;
    --dg-info: #8d18d1;
    --dg-warning: #a66500;
    --dg-danger: #b4235d;
    --dg-danger-strong: #a42645;     /* ver pendiente 3 */
    --dg-danger-soft: #fff2f5;

    /* Tipografía */
    --dg-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dg-text-xs: 12px;              /* mínimo: metadatos, insignias, ayudas (P18) */
    --dg-text-sm: 13px;              /* etiquetas, celdas de tabla */
    --dg-text-base: 14px;            /* cuerpo del panel */
    --dg-text-md: 16px;              /* cuerpo destacado, campos en móvil */
    --dg-text-lg: 18px;              /* subtítulos */
    --dg-text-xl: 22px;              /* títulos de sección */
    --dg-text-2xl: 28px;             /* títulos de página */
    --dg-text-3xl: 32px;             /* cifras de indicadores */
    --dg-leading-tight: 1.25;
    --dg-leading-body: 1.5;

    /* Espacio (base 4) */
    --dg-space-1: 4px;
    --dg-space-2: 8px;
    --dg-space-3: 12px;
    --dg-space-4: 16px;
    --dg-space-6: 24px;
    --dg-space-8: 32px;

    /* Radios */
    --dg-radius-control: 8px;
    --dg-radius-md: 10px;
    --dg-radius-panel: 17px;
    --dg-radius-pill: 999px;

    /* Sombras */
    --dg-shadow-panel: 0 18px 42px rgba(55, 31, 79, .13), 0 4px 12px rgba(55, 31, 79, .07);
    --dg-shadow-glow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 50px rgba(45, 22, 52, .055);

    /* Roles semánticos (usar estos en CSS nuevo). Apuntan a la paleta de arriba:
       no cambian nada visible y permiten ajustar cada uso por separado. */
    --dg-border-surface: var(--dg-line);            /* borde de tarjetas y paneles */
    --dg-border-subtle: var(--dg-line-cool);        /* tablas, divisores */
    --dg-border-control: var(--dg-line-control);    /* borde de campos y selectores */
    --dg-action-primary: var(--dg-brand);
    --dg-action-primary-hover: var(--dg-brand-hover);
    --dg-action-primary-soft: var(--dg-brand-soft);
    --dg-focus-ring: var(--dg-brand-alt);
    --dg-danger-text: var(--dg-danger);
    --dg-danger-fill: var(--dg-danger-strong);
    --dg-danger-surface: var(--dg-danger-soft);
}

/* Variables heredadas → tokens. Solo en páginas V7 con menú lateral, donde los valores
   ya son idénticos en las 18 páginas. Un navegador sin soporte de :has() ignora este
   bloque y conserva los mismos valores desde las capas anteriores. */
html[data-panel-design="v7"]:has(.sidebar) {
    --text-primary: var(--dg-ink);
    --ui-ink: var(--dg-ink);
    --concept-text: var(--dg-ink);
    --text-muted: var(--dg-ink-muted);
    --text-faint: var(--dg-ink-muted);
    --ui-muted: var(--dg-ink-muted);
    --concept-muted: var(--dg-ink-muted);

    --surface: var(--dg-paper);
    --ui-paper: var(--dg-paper);
    --concept-surface: var(--dg-paper);
    --ui-canvas: var(--dg-canvas);
    --surface-raised: var(--dg-surface-raised);
    --concept-bg: var(--dg-surface-raised);

    --ui-line: var(--dg-line);
    --concept-border: var(--dg-line);
    --border-soft: var(--dg-line-cool);
    --ui-control-line: var(--dg-line-control);
    --border: var(--dg-line-brand);

    --ui-brand: var(--dg-brand);
    --ui-brand-hover: var(--dg-brand-hover);
    --ui-brand-soft: var(--dg-brand-soft);
    --purple: var(--dg-brand-alt);
    --concept-purple: var(--dg-brand-alt);
    --pink: var(--dg-pink);
    --brand-gradient: var(--dg-gradient);
    --concept-gradient: var(--dg-gradient);
    --concept-gradient-hover: var(--dg-gradient-hover);
    --brand-gradient-soft: var(--dg-gradient-soft);

    --success: var(--dg-positive);
    --info: var(--dg-info);
    --warning: var(--dg-warning);
    --danger: var(--dg-danger);
    --ui-danger: var(--dg-danger-strong);
    --ui-danger-soft: var(--dg-danger-soft);

    --ui-space-1: var(--dg-space-1);
    --ui-space-2: var(--dg-space-2);
    --ui-space-3: var(--dg-space-3);
    --ui-space-4: var(--dg-space-4);
    --ui-space-6: var(--dg-space-6);
    --ui-space-8: var(--dg-space-8);

    --ui-radius-control: var(--dg-radius-control);
    --ui-radius: var(--dg-radius-md);
    --radius: var(--dg-radius-panel);
    --ui-radius-panel: var(--dg-radius-panel);
    --concept-radius: var(--dg-radius-panel);
    --radius-pill: var(--dg-radius-pill);

    --shadow: var(--dg-shadow-panel);
    --ui-shadow: var(--dg-shadow-panel);
    --concept-shadow: var(--dg-shadow-panel);
    --shadow-glow: var(--dg-shadow-glow);
}

/* --------------------------------------------------------------------------
   Decisiones pendientes (no se cambiaron para no alterar lo visible):
   1-3. Los pares de línea, morado y rojo NO se unifican (dictamen de revisión): cada uno
      cumple un rol distinto, ahora explícito en los roles semánticos de arriba.
   4. Login y Mi suscripción usan la paleta anterior (style.css / contratar.css):
      bordes #e8e2eb, morado #8d18d1, positivo verde #087a55.
      Propuesta: llevarlas a estos tokens cuando se revisen sus flujos de sesión.
   5. El modo oscuro no existe en la práctica: en V7 los valores oscuros resuelven igual
      que los claros. Coincide con posponer P20.
   -------------------------------------------------------------------------- */