/**
 * ParcelHub — Sistema de diseño (variables y tokens)
 * Personalice colores y espaciado desde este archivo.
 */
:root {
    /* Marca y acciones */
    --ph-primary: #2563eb;
    --ph-primary-hover: #1d4ed8;
    --ph-primary-soft: #dbeafe;
    --ph-primary-rgb: 37, 99, 235;

    --ph-success: #16a34a;
    --ph-success-soft: #dcfce7;
    --ph-warning: #d97706;
    --ph-warning-soft: #fef3c7;
    --ph-danger: #dc2626;
    --ph-danger-soft: #fee2e2;
    --ph-info: #0891b2;
    --ph-info-soft: #cffafe;

    /* Superficies */
    --ph-dark: #0f172a;
    --ph-bg: #f1f5f9;
    --ph-surface: #ffffff;
    --ph-card: #ffffff;
    --ph-border: #e2e8f0;
    --ph-border-strong: #cbd5e1;

    /* Sidebar */
    --ph-sidebar-bg: #111827;
    --ph-sidebar-bg-hover: #1f2937;
    --ph-sidebar-bg-active: #1e3a5f;
    --ph-sidebar-text: #94a3b8;
    --ph-sidebar-text-active: #f8fafc;
    --ph-sidebar-width: 260px;
    --ph-sidebar-collapsed-width: 72px;
    --ph-sidebar-accent: #3b82f6;

    /* Tipografía */
    --ph-text: #0f172a;
    --ph-text-muted: #64748b;
    --ph-text-inverse: #f8fafc;

    /* Sombras y radios */
    --ph-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --ph-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .04);
    --ph-shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);
    --ph-radius: 10px;
    --ph-radius-lg: 14px;

    /* Transiciones */
    --ph-transition: .2s cubic-bezier(.4, 0, .2, 1);
    --ph-header-height: 60px;
}

/* Utilidades de color */
.ph-text-primary { color: var(--ph-primary) !important; }
.ph-text-success { color: var(--ph-success) !important; }
.ph-text-warning { color: var(--ph-warning) !important; }
.ph-text-danger { color: var(--ph-danger) !important; }
.ph-text-muted { color: var(--ph-text-muted) !important; }

.ph-bg-primary-soft { background-color: var(--ph-primary-soft) !important; }
.ph-bg-success-soft { background-color: var(--ph-success-soft) !important; }
.ph-bg-warning-soft { background-color: var(--ph-warning-soft) !important; }
.ph-bg-danger-soft { background-color: var(--ph-danger-soft) !important; }
