/*
 * Design tokens — login / marketing y alias de app (tema claro).
 * Paleta: Modern Minimalist (Anthropic theme-factory)
 * https://github.com/anthropics/skills/blob/main/skills/theme-factory/themes/modern-minimalist.md
 * Charcoal #36454f · Slate #708090 · Light gray #d3d3d3 · White #ffffff
 */
:root {
    --login-font-sans: "DejaVu Sans", "Liberation Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --login-bg-page: #ffffff;
    --login-bg-elevated: #ffffff;
    --login-bg-muted: #d3d3d3ad;

    --login-text: #222222;
    --login-text-muted: #444444;

    --login-border-subtle: #d3d3d3ad;
    --login-border: #444444;

    --login-primary: #09757A;
    --login-primary-hover: color-mix(in srgb, var(--login-primary) 88%, black);
    --login-primary-active: color-mix(in srgb, var(--login-primary) 76%, black);
    --login-primary-contrast: #ffffff;

    --login-accent-soft: color-mix(in srgb, #ffffff 85%, #708090);

    --login-radius-sm: 0.5rem;
    --login-radius-md: 0.75rem;
    --login-radius-lg: 1rem;
    --login-radius-xl: 1.25rem;
    --login-radius-pill: 9999px;

    --login-shadow-sm: 0 1px 2px rgba(54, 69, 79, 0.08);
    --login-shadow-md: 0 4px 14px rgba(54, 69, 79, 0.1);
    --login-shadow-lg: 0 12px 32px rgba(54, 69, 79, 0.12);

    --login-focus-ring: rgba(54, 69, 79, 0.28);

    /* Alias tema claro para vistas de aplicación (mismos valores que login). */
    --app-bg-page: var(--login-bg-page);
    --app-bg-elevated: var(--login-bg-elevated);
    --app-bg-muted: var(--login-bg-muted);
    --app-text: var(--login-text);
    --app-text-muted: var(--login-text-muted);
    --app-border: var(--login-border);
    --app-border-subtle: var(--login-border-subtle);
    --app-primary: var(--login-primary);
    --app-primary-contrast: var(--login-primary-contrast);

    /* Acciones destructivas (cerrar orden, quitar adjunto) — WCAG AA sobre blanco */
    --app-danger: #b42318;
    --app-danger-hover: color-mix(in srgb, var(--app-danger) 88%, black);
    --app-danger-active: color-mix(in srgb, var(--app-danger) 78%, black);
    --app-danger-contrast: #ffffff;
    --app-danger-subtle-bg: color-mix(in srgb, var(--app-danger) 10%, var(--app-bg-page));
}